мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

Свойство background-clip

Свойство 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,
    представляющее собой свойство-сокращение для фона