background-clip

Определяет, как цвет фона или фоновая картинка должна выводиться под границами. Эффект заметен при прозрачных или пунктирных границах.

Краткая информация

Значение по умолчанию border-box
НаследуетсяНет
ПрименяетсяКо всем элементам
АнимируетсяНет

Синтаксис

background-clip: [padding-box | border-box | content-box | text]#
ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

padding-box
Фон отображается внутри границ.
border-box
Фон выводится под границами.
content-box
Фон отображается только внутри контента.
text
Фон отображается только внутри текста.

Значений может быть несколько (для каждого из множественных фоновых рисунков), при этом значения разделяются между собой запятой.

Результат использования значений свойства background-clip для элемента с пунктирной рамкой толщиной 10 пикселей показан на рис. 1.

padding-boxborder-boxcontent-box
padding-boxborder-boxcontent-box

Рис. 1. Результат применения разных значений

Песочница

Акула
div {
  background-image: url(image/shark.jpg);
  background-size: cover;
  padding: 20px;
  border: 5px dashed #c26558;
  background-clip: {{ playgroundValue }};
  -webkit-background-clip: {{ playgroundValue }}
  color: transparent
}

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>background-clip</title> <style> .example { background: #5f392f url(/example/image/gear.png); /* Фоновый рисунок */ border: 10px dotted red; /* Параметры рамки */ background-clip: border-box; /* Фон под рамкой */ padding: 10px; /* Поля */ color: #fff; /* Цвет текста */ min-height: 48px; /* Минимальная высота */ } </style> </head> <body> <div class="example">Содержимое страницы</div> </body> </html>

Объектная модель

Объект.style.backgroundClip

Примечание

Firefox до версии 4 поддерживает свойство -moz-background-clip и значения padding и border.

В Chrome, Safari, Opera и Android значение text работает только со свойством -webkit-background-clip.

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

СпецификацияСтатус
CSS Backgrounds and Borders Module Level 3Возможная рекомендация

Браузеры

border-box, padding-box, content-box912411.53.14
text4153.149
border-box, padding-box, content-box2.14123.2
text2.149153.2

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.