background-clip CSS

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

Эффект заметен при прозрачных или пунктирных границах.

Значение по умолчанию:

border-box

Наследуется:
Нет
Применяется:

Ко всем элементам

Анимируется:
Нет
Объект JavaScript:

object.style.backgroundClip

Спецификации:
Поддержка браузерами:

Can I Use background-img-opts? Data on support for the background-img-opts feature across the major browsers from caniuse.com.

Синтаксис

/* Keyword values */
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;

/* Global values */
background-clip: inherit;
background-clip: initial;
background-clip: unset;

Значения

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

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

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

Значения background-clip
Рис. 1а
Рис. 1а
Рис. 1а
Рис. 1а
Рис. 1а
Рис. 1а
padding-box border-box content-box

Примеры

<!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>

Примечание

  • Firefox до версии 4 поддерживает свойство -moz-background-clip и значения padding и border.
  • В Chrome, Safari, Opera и Android значение text работает только со свойством -webkit-background-clip.