Свойство CSS background-clip
Останавливается ли фон (цвет, изображение или градиент) на рамке, на внутреннем отступе или на содержимом, решает свойство CSS background-clip.
Три значения описывают, где заканчивается отрисовка:
border-box- Отрисовка продолжается под рамкой; именно это вы получаете, если ничего не задаёте.padding-box- Отрисовка заканчивается там, где начинается рамка, на её внутреннем крае.content-box- Отрисовка остаётся внутри области содержимого, до её края.
Background clip с изображением
Фоновое изображение, обрезанное тремя способами с помощью background-clip:
Prompt
Покажите три div-блока с пунктирной рамкой и внутренним отступом, каждый с фоновым изображением (paper.gif) и разным значением background-clip: border-box, padding-box и content-box.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS background-clip with Image</title>
<style>
#div1 {
border: 5px dotted black;
padding: 35px;
background-image: url("paper.gif");
background-clip: border-box;
}
#div2 {
border: 5px dotted black;
padding: 35px;
background-image: url("paper.gif");
background-clip: padding-box;
}
#div3 {
border: 5px dotted black;
padding: 35px;
background-image: url("paper.gif");
background-clip: content-box;
}
div {
margin-bottom: 15px;
}
</style>
</head>
<body>
<h2>background-clip: border-box (default):</h2>
<div id="div1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<h2>background-clip: padding-box:</h2>
<div id="div2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<h2>background-clip: content-box:</h2>
<div id="div3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</body>
</html>
Background clip с цветом
Те же три значения background-clip, на этот раз для фонового цвета:
Prompt
Покажите три div-блока с пунктирной рамкой и внутренним отступом, каждый с фоновым цветом lightblue и разным значением background-clip: border-box, padding-box и content-box.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS background-clip with Color</title>
<style>
#div1 {
border: 5px dotted black;
padding: 35px;
background-color: lightblue;
background-clip: border-box;
}
#div2 {
border: 5px dotted black;
padding: 35px;
background-color: lightblue;
background-clip: padding-box;
}
#div3 {
border: 5px dotted black;
padding: 35px;
background-color: lightblue;
background-clip: content-box;
}
div {
margin-bottom: 15px;
}
</style>
</head>
<body>
<h2>background-clip: border-box (default):</h2>
<div id="div1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<h2>background-clip: padding-box:</h2>
<div id="div2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<h2>background-clip: content-box:</h2>
<div id="div3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</body>
</html>
Расширенные свойства фона CSS
Эти расширенные свойства составляют семейство свойств фона CSS:
background- Сокращённое свойство, которое задаёт все свойства фона в одном объявлении.background-clip- Определяет область, в которой отрисовывается фон.background-image- Назначает элементу одно или несколько фоновых изображений.background-origin- Задаёт начальную точку для позиционирования фонового изображения (изображений).background-size- Управляет тем, насколько большим выглядит фоновое изображение (изображения).