background-clip

Описание

Свойство CSS background-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 
Фон закрашивается внутри (обрезается) текста переднего плана.

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

<box>#

где
<box> = border-box | padding-box | 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 typediscrete
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
background-clipChrome Полная поддержка 1
Полная поддержка 1
Нет поддержки 1 — 64
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Chrome accepts alternate synonyms to its values: padding, border, and content.
Edge Полная поддержка 12Firefox Полная поддержка 4
Полная поддержка 4
Полная поддержка 49
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Нет поддержки 1 — 4
С префиксом Замечания
С префиксом Требует вендорный префикс: -moz-
Замечания Used the -moz-background-clip: padding | border syntax.
IE Полная поддержка 9
Замечания
Полная поддержка 9
Замечания
Замечания In IE 7 and IE 8 of Internet Explorer, this property always behaved like background-clip: padding when overflow was hidden, auto, or scroll.
Opera Полная поддержка 10.5
Полная поддержка 10.5
Нет поддержки 15 — 51
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Opera accepts alternate synonyms to its values: padding, border, and content.
Safari Полная поддержка 3
С префиксом Замечания
Полная поддержка 3
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Safari accepts alternate synonyms to its values: padding, border, and content.
WebView Android Полная поддержка 4.1
Полная поддержка 4.1
Нет поддержки ≤37 — 64
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания WebView accepts alternate synonyms to its values: padding, border, and content.
Chrome Android Полная поддержка 18
Полная поддержка 18
Нет поддержки 18 — 64
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Chrome accepts alternate synonyms to its values: padding, border, and content.
Firefox Android Полная поддержка 14
Полная поддержка 14
Полная поддержка 49
С префиксом
С префиксом Требует вендорный префикс: -webkit-
Opera Android Полная поддержка 11
Полная поддержка 11
Нет поддержки 14 — 47
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Opera accepts alternate synonyms to its values: padding, border, and content.
Safari iOS Полная поддержка 1
С префиксом Замечания
Полная поддержка 1
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Safari accepts alternate synonyms to its values: padding, border, and content.
Samsung Internet Android Полная поддержка 1.0
content-boxChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 4IE Полная поддержка 9
Замечания
Полная поддержка 9
Замечания
Замечания In IE 7 and IE 9 of Internet Explorer, it always behaved like background-clip: padding if overflow: hidden | auto | scroll
Opera Полная поддержка 10.5Safari Полная поддержка 3WebView Android Полная поддержка 4.1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 14Opera Android Полная поддержка 11Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
text
Экспериментальная
Chrome Частичная поддержка 3
Замечания
Частичная поддержка 3
Замечания
Замечания This value is supported with the prefixed version of the property only.
Замечания According to the WebKit blog, text decorations or shadows are not included in the clipping.
Edge Полная поддержка 15
Полная поддержка 15
Частичная поддержка 12
Замечания
Замечания Before Edge 15, this value was supported with the prefixed version of the property only.
Firefox Полная поддержка 49
Полная поддержка 49
Полная поддержка 48
Отключено
Отключено From version 48: this feature is behind the layout.css.background-clip-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Частичная поддержка 15
Замечания
Частичная поддержка 15
Замечания
Замечания This value is supported with the prefixed version of the property only.
Замечания According to the WebKit blog, text decorations or shadows are not included in the clipping.
Safari Частичная поддержка 4
Замечания
Частичная поддержка 4
Замечания
Замечания This value is supported with the prefixed version of the property only.
Замечания According to the WebKit blog, text decorations or shadows are not included in the clipping.
WebView Android Частичная поддержка ≤37
Замечания
Частичная поддержка ≤37
Замечания
Замечания This value is supported with the prefixed version of the property only.
Замечания According to the WebKit blog, text decorations or shadows are not included in the clipping.
Chrome Android Частичная поддержка 18
Замечания
Частичная поддержка 18
Замечания
Замечания This value is supported with the prefixed version of the property only.
Замечания According to the WebKit blog, text decorations or shadows are not included in the clipping.
Firefox Android Полная поддержка 49
Полная поддержка 49
Полная поддержка 48
Отключено
Отключено From version 48: this feature is behind the layout.css.background-clip-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Частичная поддержка 14
Замечания
Частичная поддержка 14
Замечания
Замечания This value is supported with the prefixed version of the property only.
Замечания According to the WebKit blog, text decorations or shadows are not included in the clipping.
Safari iOS Частичная поддержка 3.2
Замечания
Частичная поддержка 3.2
Замечания
Замечания This value is supported with the prefixed version of the property only.
Замечания According to the WebKit blog, text decorations or shadows are not included in the clipping.
Samsung Internet Android Частичная поддержка 1.0
Замечания
Частичная поддержка 1.0
Замечания
Замечания This value is supported with the prefixed version of the property only.
Замечания According to the WebKit blog, text decorations or shadows are not included in the clipping.

Легенда

Полная поддержка  
Полная поддержка
Частичная поддержка  
Частичная поддержка
Нет поддержки  
Нет поддержки
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Смотрите замечания реализации.
Смотрите замечания реализации.
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

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