CSS-свойство `background-clip`

Свойство background-clip CSS задаёт, распространяется ли фон элемента под его рамку, внутренний отступ или содержимое.

Попробуйте

background-clip: border-box;

background-clip: padding-box;

background-clip: content-box;

background-clip: text;
color: transparent;
text-shadow: none;

<section id="default-example">
  <div id="example-element">This is the content of the element.</div>
</section>

#example-element {
  background-image: url("/shared-assets/images/examples/leopard.jpg");
  color: white;
  text-shadow: 2px 2px black;
  padding: 20px;
  border: 10px dashed #333333;
  font-size: 2em;
  font-weight: bold;
}

Синтаксис

/* Keyword values */
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;
background-clip: border-area;

/* Global values */
background-clip: inherit;
background-clip: initial;
background-clip: revert;
background-clip: revert-layer;
background-clip: unset;

Значения

border-box

Фон распространяется до внешнего края рамки (но под рамкой в порядке наложения).

padding-box

Фон распространяется до внешнего края внутреннего отступа. Под рамкой фон не отрисовывается.

content-box

Фон отрисовывается внутри области содержимого (обрезается по её границам).

text

Фон отрисовывается внутри текста переднего плана (обрезается по его границам).

border-area

Фон отрисовывается внутри области, занимаемой рамкой (обрезается по её границам), с учётом border-width и border-style, но без учёта прозрачности, заданной свойством border-color.

Описание

Фон всегда отрисовывается за рамкой, поэтому background-clip: border-box влияет на отображение только в том случае, если рамка частично непрозрачна или содержит прозрачные либо частично непрозрачные области. Кроме того, свойство background-clip: text практически не влияет на отображение, если текст полностью или частично непрозрачен.

Доступность

При использовании background-clip: text проверьте, достаточно ли велик коэффициент контрастности между цветом фона и цветом расположенного поверх него текста, чтобы люди с нарушениями зрения могли прочитать содержимое страницы.

Если фоновое изображение не загрузится, текст также может стать нечитаемым. Чтобы этого не произошло, задайте резервный цвет background-color и проверьте страницу без изображения.

Рассмотрите возможность использования запросов функций с @supports, чтобы проверить поддержку background-clip: text и предоставить доступную альтернативу в браузерах, где это свойство не поддерживается.

Формальное определение

Формальный синтаксис

background-clip = 
  <bg-clip>#

<bg-clip> = 
  <visual-box> |
  border-area |
  text

<visual-box> = 
  content-box |
  padding-box |
  border-box

Примеры

HTML

<p class="border-box">The background extends behind the border.</p>
<p class="padding-box">
  The background extends to the inside edge of the border.
</p>
<p class="content-box">
  The background extends only to the edge of the content box.
</p>
<p class="text">The background is clipped to the foreground text.</p>
<p class="border-area">
  The background is clipped to the area painted by the border.
</p>

CSS

p {
  border: 0.8em darkviolet;
  border-style: dotted double;
  margin: 1em 0;
  padding: 1.4em;
  background: linear-gradient(60deg, red, yellow, red, yellow, red);
  font: 900 1.2em sans-serif;
  text-decoration: underline;
}

.border-box {
  background-clip: border-box;
}
.padding-box {
  background-clip: padding-box;
}
.content-box {
  background-clip: content-box;
}

.text {
  background-clip: text;
  color: rgb(0 0 0 / 20%);
}

.border-area {
  background-clip: border-area;
  border-color: transparent;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• Свойство clip-path создаёт область отсечения, которая определяет, какая часть всего элемента должна отображаться.
• Свойства фона: background, background-color, background-image, background-origin
• Введение в блочную модель CSS