background-clip

Описание

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

Если фоновое изображение или цвет не заданы, это свойство будет иметь визуальный эффект, только если у границы есть прозрачные области или частично непрозрачные области (из-за border-style (en-US) или border-image (en-US)); в противном случае граница скрывает разницу.

Синтаксис

/* Значения ключевых слов */
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 = 
  <box># (en-US)  

<box> = 
  border-box   | (en-US)
  padding-box  | (en-US)
  content-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>

CSS

p {
  border: .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,.2);
}

Результат

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

Спецификация	Статус	Комментарий
CSS Backgrounds and Borders Module Level 3 Определение 'background-clip' в этой спецификации.	Кандидат в рекомендации	Первоначальное определение.
CSS Backgrounds and Borders Module Level 4 Определение 'background-clip' в этой спецификации.	Редакторский черновик	Добавляет значение `text`.

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

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

BCD tables only load in the browser

Смотрите также

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