Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Описание

Свойство 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 для AndroidEdge MobileFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
background-clipChrome Полная поддержка 1
Полная поддержка 1
Полная поддержка Да
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
Edge Полная поддержка 12Firefox Полная поддержка 4
Полная поддержка 4
Полная поддержка 49
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
Нет поддержки 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
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
Safari Полная поддержка 3
Замечания
Полная поддержка 3
Замечания
Замечания Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
WebView Android Полная поддержка 4.1
Полная поддержка 4.1
Полная поддержка Да
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
Chrome Android Полная поддержка Да
Полная поддержка Да
Полная поддержка Да
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 14
Полная поддержка 14
Полная поддержка 49
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
Opera Android Полная поддержка 11
Полная поддержка 11
Полная поддержка 14
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Webkit also supports the prefixed version of this property, and in that case, in addition to the current keywords, the alternative synonyms are: padding, border, and content.
Safari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
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 Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка 14Opera Android Полная поддержка 11Safari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
text
Экспериментальная
Chrome Полная поддержка Да
С префиксом Замечания
Полная поддержка Да
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Support the prefixed version of the property only; according to the official blog, WebKit does not include text decorations or shadows in the clipping.
Edge Полная поддержка 15
Полная поддержка 15
Полная поддержка 12
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Support the prefixed version of the property only; according to the official blog, WebKit does not include text decorations or shadows in the clipping.
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 Полная поддержка Да
С префиксом Замечания
Полная поддержка Да
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Support the prefixed version of the property only; according to the official blog, WebKit does not include text decorations or shadows in the clipping.
Safari Полная поддержка Да
С префиксом Замечания
Полная поддержка Да
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Support the prefixed version of the property only; according to the official blog, WebKit does not include text decorations or shadows in the clipping.
WebView Android Полная поддержка Да
С префиксом Замечания
Полная поддержка Да
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Support the prefixed version of the property only; according to the official blog, WebKit does not include text decorations or shadows in the clipping.
Chrome Android Полная поддержка Да
С префиксом Замечания
Полная поддержка Да
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Support the prefixed version of the property only; according to the official blog, WebKit does not include text decorations or shadows in the clipping.
Edge Mobile Полная поддержка Да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 Полная поддержка Да
С префиксом Замечания
Полная поддержка Да
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Support the prefixed version of the property only; according to the official blog, WebKit does not include text decorations or shadows in the clipping.
Safari iOS Полная поддержка Да
С префиксом Замечания
Полная поддержка Да
С префиксом Замечания
С префиксом Требует вендорный префикс: -webkit-
Замечания Support the prefixed version of the property only; according to the official blog, WebKit does not include text decorations or shadows in the clipping.
Samsung Internet Android ?

Легенда

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

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

Метки документа и участники

Внесли вклад в эту страницу: mdnwebdocs-bot, Akh-rman, Maxim-Bernashevsky, andreww2012
Обновлялась последний раз: mdnwebdocs-bot,