Перейти к содержанию

background-clip

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

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

Фон

Синтаксис

/* 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а](css_background-clip_1.png) ![Рис. 1б](css_background-clip_2.png) ![Рис. 1в](css_background-clip_3.png)
`padding-box``border-box``content-box`

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

background-clip: border-box;

Применяется ко всем элементам

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

Поддержка браузерами

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

Описание и примеры

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