background-clip

Базовая линия Широко доступная

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

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

Попробовать

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

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

Примечание: Для документов, у которых корневым элементом является HTML-элемент: если вычисленное значение background-image для корневого элемента равно none, а его background-color равно transparent, пользовательские агенты должны вместо этого распространять вычисленные значения свойств background из первого HTML-элемента <body> этого элемента. Используемые значения свойств <body> этого элемента background равны их начальным значениям, а распространяемые значения обрабатываются так, как будто они были указаны для корневого элемента. Рекомендуется, чтобы авторы HTML-документов указывали фон холста для элемента <body> вместо HTML-элемента.

Синтаксис

/* 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: Фон простирается до внешнего края рамки (но под рамкой в порядке z-индексов).
padding-box: Фон простирается до внешнего края поля. Фон не рисуется под рамкой.
content-box: Фон рисуется внутри (обрезается) области содержимого.
text: Фон рисуется внутри (обрезается) области переднего текста.
border-area: Фон рисуется внутри (обрезается) области, нарисованной рамкой, учитывая border-width и border-style, но игнорируя любую прозрачность, введённую border-color.

Доступность

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

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

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

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

Начальное значение	`border-box`
Применимо к	всем элементам. Также применимо к `::first-letter` и `::first-line`.
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	повторяющийся список

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

background-clip = 
  <visual-box>#  

<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;
}

Результат

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

Спецификация
CSS Backgrounds and Borders Module Level 3 # background-clip
CSS Backgrounds and Borders Module Level 4 # background-clip

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

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`background-clip`	1 1 Chrome принимает альтернативные синонимы для своих значений: `padding`, `border`, и `content`.	12 12 С Edge 79, принимает альтернативные синонимы для своих значений: `padding`, `border`, и `content`.	449 1–4 Использовался синтаксис `-moz-background-clip: padding \| border`.	10.5 15 Opera принимает альтернативные синонимы для своих значений: `padding`, `border`, и `content`.	5 3 Safari принимает альтернативные синонимы для своих значений: `padding`, `border`, и `content`.	18 18 Chrome принимает альтернативные синонимы для своих значений: `padding`, `border`, и `content`.	449	11 14 Opera принимает альтернативные синонимы для своих значений: `padding`, `border`, и `content`.	5 1 Safari принимает альтернативные синонимы для своих значений: `padding`, `border`, и `content`.	1.0 1.0 Samsung Internet принимает альтернативные синонимы для своих значений: `padding`, `border`, и `content`.	4.4 4.4 Chrome принимает альтернативные синонимы для своих значений: `padding`, `border`, и `content`.
`border-area`	Нет	Нет	Нет	Нет	18.2	Нет	Нет	Нет	18.2	Нет	Нет
`border-box`	1	12	4	15	3	18	4	14	2	1.0	4.4
`content-box`	1	12	4	10.5	3	18	4	11	1	1.0	4.4
`padding-box`	1	12	4	15	3	18	4	14	2	1.0	4.4
`text`	120 3 Значение `text` поддерживается только `-webkit-background-clip` (и не `background-clip`; см. ошибку 40229927).	120 79 Значение `text` поддерживается только `-webkit-background-clip` (и не `background-clip`; см. ошибку 40229927). 15–79 12–15 До Edge 15 это значение поддерживалось с префиксной версией свойства.	49 Не работает с `background-attachment: fixed` (ошибка 1313757), в многослойных фонах с другими значениями (ошибка 1481498) и в некоторых других особых случаях (см. ошибку 1656784).	106 15 Значение `text` поддерживается только `-webkit-background-clip` (и не `background-clip`; см. ошибку 40229927).	14 4 Значение `text` поддерживается только `-webkit-background-clip` (и не `background-clip`).	120 18 Значение `text` поддерживается только `-webkit-background-clip` (и не `background-clip`; см. ошибку 40229927).	49 Не работает с `background-attachment: fixed` (ошибка 1313757), в многослойных фонах с другими значениями (ошибка 1481498) и в некоторых других особых случаях (см. ошибку 1656784).	80 14 Значение `text` поддерживается только `-webkit-background-clip` (и не `background-clip`; см. ошибку 40229927).	14 3.2 Значение `text` поддерживается только `-webkit-background-clip` (и не `background-clip`).	25.0 1.0 Значение `text` поддерживается только `-webkit-background-clip` (и не `background-clip`; см. ошибку 40229927).	120 4.4 Значение `text` поддерживается только `-webkit-background-clip` (и не `background-clip`; см. ошибку 40229927).

См. также

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

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip