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

background-clip

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

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

Демо

Фон

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
/* 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`

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

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<!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.

Комментарии