Свойство background-clip задает как фоновая заливка или фоновая картинка будет размещаться относительно элемента: часть фона будет залазить под границу, фон не будет залазить под границу или фон будет размещаться только над содержимым элемента (то есть padding отодвинет фон).
Синтаксис
селектор {
background-clip: padding-box | border-box | content-box;
}
Значения
Значение | Описание |
---|---|
border-box | Фон залезет под границу. |
padding-box | Фон не будет залезать под границу. |
content-box | Фон будет только над содержимым. |
Значение по умолчанию: border-box.
Пример . Значение padding-box, картинка
В данном случае фон не зайдет под границу:
<div id="elem"></div>
#elem {
background-image: url("bg.png");
background-repeat: no-repeat;
border: 10px dashed black;
padding: 30px;
width: 250px;
height: 150px;
}
:
Пример . Значение border-box, картинка
Сейчас фон зайдет под границу:
<div id="elem"></div>
#elem {
background-clip: border-box;
background-image: url("bg.png");
background-repeat: no-repeat;
border: 10px dashed black;
padding: 30px;
width: 250px;
height: 150px;
}
:
Пример . Значение content-box
А теперь та часть фона, которая находится под padding, будет обрезана:
<div id="elem"></div>
#elem {
background-clip: content-box;
background-image: url("bg.png");
background-repeat: no-repeat;
border: 10px dashed black;
padding: 30px;
width: 250px;
height: 150px;
}
:
Пример . Значение padding-box, заливка
Сейчас фоновый цвет не зайдет под границу:
<div id="elem"></div>
#elem {
background-color: orange;
background-clip: padding-box;
border: 10px dashed black;
padding: 30px;
width: 250px;
height: 150px;
}
:
Пример . Значение border-box, заливка
А теперь фоновый цвет зайдет под границу:
<div id="elem"></div>
#elem {
background-color: orange;
background-clip: border-box;
border: 10px dashed black;
padding: 30px;
width: 250px;
height: 150px;
}
:
Пример . Значение content-box, background-color
А теперь фоновая заливка будет отодвинута padding:
<div id="elem"></div>
#elem {
background-color: orange;
background-clip: content-box;
border: 10px dashed black;
padding: 30px;
width: 250px;
height: 150px;
}
:
Смотрите также
-
свойство background,
представляющее собой свойство-сокращение для фона