Свойство CSS background-clip
Свойство CSS background-clip определяет область, в которой отображаются background-color и background-image. Если у элемента нет background-color или background-image, это свойство не оказывает визуального эффекта.
Свойство background-clip является одним из свойств CSS3.
Для обрезки фона по тексту также доступна версия с вендорным префиксом (-webkit-background-clip).
| Начальное значение | border-box |
|---|---|
| Применяется к | Ко всем элементам. Также применяется к ::first-letter и ::first-line. |
| Наследуется | Нет. |
| Анимируется | Нет. |
| Версия | CSS3 |
| Синтаксис DOM | object.style.backgroundClip = "content-box"; |
Синтаксис
Синтаксис свойства CSS background-clip
background-clip: border-box | padding-box | content-box | text | initial | inherit;Пример свойства background-clip:
Пример свойства CSS background-clip со значением content-box
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
#example {
border: 3px solid #666;
padding: 15px;
background: #ccc;
background-clip: content-box;
}
</style>
</head>
<body>
<h2>Background-clip property example</h2>
<p>Here the "content-box" value is used.</p>
<div id="example">
<p>The background extends to the edge of the content box.</p>
</div>
</body>
</html>В следующем примере найдите разницу между значениями "padding-box" и "border-box".
Пример свойства background-clip со значениями "padding-box" и "border-box":
Пример свойства CSS background-clip со значением border-box
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
#example1 {
border: 5px dashed #666;
padding: 15px;
background: #1c87c9;
background-clip: border-box;
}
#example2 {
border: 5px dashed #666;
padding: 15px;
background: #1c87c9;
background-clip: padding-box;
}
</style>
</head>
<body>
<h2>Background-clip property example</h2>
<p>Here the background-clip is set to "border-box" (this is the default value).</p>
<div id="example1">
<p>The background extends behind the border.</p>
</div>
<p>Here the background-clip is set to "padding-box".</p>
<div id="example2">
<p>The background extends to the inside edge of the border.</p>
</div>
</body>
</html>В этом примере фон отображается внутри текста переднего плана.
Пример свойства background-clip со значением "text":
Пример свойства CSS background-clip со значением text
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
#example {
border: 3px dashed #1ebf42;
padding: 15px;
background: #1c87c9;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
</style>
</head>
<body>
<h2>Background-clip property example</h2>
<p>Here the background-clip is set to "text"</p>
<div id="example">
<p>The background is painted within the foreground text.</p>
</div>
</body>
</html>Значения
| Значение | Описание | Попробовать |
|---|---|---|
| border-box | Фон отображается за границей. Это значение по умолчанию. | Попробовать » |
| padding-box | Фон отображается внутри границы. | Попробовать » |
| content-box | Фон распространяется до края блока контента. | Попробовать » |
| text | Фон отображается внутри текста переднего плана. | Попробовать » |
| initial | Устанавливает свойству его значение по умолчанию. | Попробовать » |
| inherit | Наследует свойство от родительского элемента. |
Практика
Какое из следующих значений можно использовать со свойством 'background-clip' в CSS?