This page was translated from English by the community.Learn more and join the MDN Web Docs community.
background-clip
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..
* Some parts of this feature may have varying levels of support.
Описание
Свойство CSSbackground-clip определяет как цвет фона или фоновое изображение будут выводиться под границами блока.
Если фоновое изображение или цвет не заданы, это свойство будет иметь визуальный эффект, только если у границы есть прозрачные области или частично непрозрачные области (из-заborder-style илиborder-image); в противном случае граница скрывает разницу.
Синтаксис
/* Ключевые слова */background-clip: border-box;background-clip: padding-box;background-clip: content-box;background-clip: text;/* Глобальные значения */background-clip: inherit;background-clip: initial;background-clip: unset;Значения
border-boxФон распространяется до внешнего края границы (но под границей в z-порядке).
padding-boxФон распространяется до внешнего края отступа. Под границей фон не рисуется.
content-boxФон закрашивается внутри (обрезается) поля содержимого.
textЭкспериментальная возможностьФон закрашивается внутри (обрезается) текста переднего плана.
Формальный синтаксис
background-clip =
<bg-clip>#
<bg-clip> =
<visual-box>|
[border-area||text]
<visual-box> =
content-box|
padding-box|
border-box
Примеры
HTML
<p>The background extends behind the border.</p><p> The background extends to the inside edge of the border.</p><p> The background extends only to the edge of the content box.</p><p>The background is clipped to the foreground text.</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: rgba(0, 0, 0, 0.2);}Результат
Спецификации
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # background-clip |
| CSS Backgrounds Module Level 4 # background-clip |
| Начальное значение | border-box |
|---|---|
| Применяется к | все элементы. Это также применяется к::first-letter и::first-line. |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | повторяющийся список из |
Совместимость с браузерами
Смотрите также
- Свойство
clip-pathсоздаёт область отсечения, которая определяет, которая определяет, какая часть целого элемента должна отображаться. - Свойства фона:
background,background-color,background-image - Введение в блочную модель CSS