CSS background-clip — область виведення тла
Властивість background-clip визначає, як колір чи картинка тла має виводитися під гранями. Ефект помітний при напівпрозорих (зі значенням transparent) або пунктирних гранях.
Властивість background-clip була введена у CSS3, використовуй її разом з іншими, пов’язаними, властивостями, такими як background-color чи background-image.
Ця властивість може отримувати декілька значень (для кожного з декількох фонових малюнків), при цьому значення поділяються між собою комою.
Без задання застосовується background-clip: border-box, тло простягається до самого краю кордону елемента. Коли властивість приймає значення padding-box, фон зупиняється, коли закінчується внутрішні відступи (поля) елемента. За допомогою content-box, фон застосовується тільки до вмісту елемента.
Існує подібна властивість - background-origin, от тільки вона не ріже тло, тому якщо тло завелике для елемента, то воно просто пройде під його гранями. Дивись 3 приклад.
Ця властивість також можна використовувати в скороченому записі background (наприклад: background: url("background.png") 40% / 10em lightblue round border-box;).
Загальний опис
автор: NagarD
Синтаксис
background-clip: border-box|padding-box|content-box|initial|inherit;Властивість background-clip може отримувати 5 значень:
-
padding-box -
Тло відображається до граней елемента.
автор: Svitlana -
border-box -
Тло відображається під гранями елемента. Без задання.
автор: Svitlana -
content-box -
Тло відображається тільки всередині контенту.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента
автор: Svitlana
| Значення без задання: | border-box |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.backgroundClip="content-box" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 4 | 5 | 10.5 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 5 |
Приклади
+ запропонувати свій приклад у пісочниці
Три однакові блоки з золотим тлом і напівпрозорим пунктирним бордером — різниця лише в background-clip: тло сягає зовнішнього краю бордера, зупиняється на краю відступів або лежить тільки під вмістом.
HTML
<div class="box bb">border-box</div>
<div class="box pb">padding-box</div>
<div class="box cb">content-box</div>CSS
.box {
display: inline-block;
width: 120px;
padding: 12px;
margin: 0 8px 8px 0;
border: 6px dashed rgba(0, 0, 0, .4);
background-color: gold;
}
.bb { background-clip: border-box; }
.pb { background-clip: padding-box; }
.cb { background-clip: content-box; }HTML
<h4>Властивість <code>background-clip</code></h4>
<div class="demo">
<div class="block pad"><span>padding-box</span></div>
<div class="block bor"><span>border-box</span></div>
<div class="block con"><span>content-box</span></div>
</div>CSS
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
line-height: 1.45;
font-size: 18px;
padding: 16px 16px 0 16px;
text-align: center;
}
h4 {
color: #4f4f4f;
font-weight: 400;
}
.demo {
display: flex;
align-items: center;
justify-content: space-between;
}
.block {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='175' height='175' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: cover;
width: 175px;
height: 175px;
border: 12px solid rgba(0, 0, 0, .15);
margin-top: 46px;
padding: 12px;
}
.block > span {
position: relative;
top: -55px;
font-family: monospace;
font-size: .9em;
font-weight: 700;
color: #4f4f4f;
}
.pad { background-clip: padding-box; }
.bor {
background-clip: border-box;
background-origin: border-box;
}
.con { background-clip: content-box; }Демонстрація роботи властивості
HTML
<div class="padding-box"><p>padding-box</p></div>
<div class="border-box"><p>border-box</p></div>
<div class="content-box"><p>content-box</p></div>CSS
div {
border: 10px dotted rgba(0,0,0,.5);
width: 25%;
height: 250px;
margin-bottom: 45px;
background-color: yellow;
background-size: cover;
background-repeat: no-repeat;
background-size: 100% 100%;
display: inline-block;
padding: 16px;
}
p {
text-align: center;
margin-top: 25%;
font-size: 3em;
}
div.padding-box {
background-clip: padding-box;
}
.border-box {
background-clip: border-box;
}
.content-box {
background-clip: content-box;
}Градієнтний текст: тло-градієнт обрізане по формі букв через background-clip: text, а сам текст зроблено прозорим. Приберіть color: transparent — і градієнт сховається під суцільним кольором тексту.
HTML
<h2 class="grad">Градієнт по буквах</h2>
<p class="note">background-image + background-clip: text + color: transparent</p>
<h2 class="plain">Звичайний текст для порівняння</h2>CSS
body {
font-family: sans-serif;
padding: 22px;
background-color: #14161a;
}
.grad {
margin: 0;
font-size: 42px;
font-weight: 800;
background-image: linear-gradient(90deg, #ff8a00, #e52e71, #4a90e2);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.note {
font-family: monospace;
font-size: 13px;
color: #8a93a0;
}
.plain {
margin: 0;
font-size: 42px;
font-weight: 800;
color: #8a93a0;
}HTML
<p>Цей приклад показує як працює властивість <strong>background-clip</strong>. Спробуйте ввімкнуити різні перемикачі, щоб змінити відображення фонового зображення нище.</p>
<div class="inputs">
<input id="padding-box" checked name="background-clip" type="radio"/>
<label for="padding-box">padding-box</label>
<message for="padding-box">Тло відображається до граней елемента.</message>
<input id="border-box" name="background-clip" type="radio"/>
<label for="border-box">border-box</label>
<message for="border-box">Тло відображається під гранями елемента. Без задання.</message>
<input id="content-box" name="background-clip" type="radio"/>
<label for="content-box">content-box</label>
<message for="content-box">Тло відображається тільки всередині контенту.</message>
</div>
<p id="message">Тло відображається під гранями елемента. Без задання.</p>
<div id="block"></div>CSS
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
message {
display: none;
}
#block {
width: 200px;
height: 200px;
margin: 36px auto;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-origin: border-box;
background-size: cover;
padding: 16px;
border: 16px solid rgba(0, 0, 0, .15);
}JS
const message = document.querySelector('#message');
document.querySelectorAll('.inputs input').forEach((el) => el.addEventListener('change', function () {
var messageText = document.querySelector("message[for='" + this.id + "']");
message.textContent = messageText?.textContent ?? '';
document.querySelectorAll('#block').forEach((n) => n.style.setProperty('background-clip', this.id));
}));HTML
<div class="inputs">
<input id="border-box" checked name="box_selectors" type="radio"/>
<label for="border-box">border-box</label>
<input id="padding-box" name="box_selectors" type="radio"/>
<label for="padding-box">padding-box</label>
<input id="content-box" name="box_selectors" type="radio"/>
<label for="content-box">content-box</label>
</div>
<div class="box">
<div class="little_box"></div>
</div>CSS
.box {
position: relative;
background: #545454 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E");
height: 200px;
width: 200px;
margin: 0 auto;
border: 18px solid rgba(0, 0, 0, 0.3);
background-clip: border-box;
background-origin: border-box;
background-size: cover;
background-repeat: no-repeat;
padding: 30px;
}
.little_box {
text-align: center;
color: white;
font-size: 1.5em;
width: 100%;
height: 100%;
padding: 4px;
box-sizing: border-box;
}
.inputs {
text-align: center;
margin: 16px;
label {
cursor: pointer;
padding: 12px 0;
}
input {
cursor: pointer;
margin-left: 12px;
}
}JS
document.querySelectorAll('.inputs input').forEach((el) => el.addEventListener('change', function () {
console.log(this);
document.querySelectorAll('.box').forEach((n) => n.style.setProperty('background-clip', this.id));
}));HTML
<div class="inputs">
<input checked id="background-origin" name="background" type="radio"/>
<label for="background-origin">background-origin: padding-box</label>
<br>
<input id="background-clip" name="background" type="radio"/>
<label for="background-clip">background-clip: padding-box</label>
</div>
<div class="result"></div>CSS
.result {
box-sizing: border-box;
height: 300px;
width: 300px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E") no-repeat;
border: 16px solid rgba(23,23,23,0.5);
/* background-size: cover; */
padding: 16px;
margin: 0 auto;
}
.inputs {
margin:0 auto 8px;
width:300px;
label {
cursor: pointer;
padding: 12px 0;
}
input {
cursor: pointer;
margin-left: 12px;
}
}JS
document.querySelectorAll('.inputs input').forEach((el) => el.addEventListener('change', function () {
document.querySelectorAll('.result').forEach((n) => n.style.setProperty('background-origin', 'initial'));
document.querySelectorAll('.result').forEach((n) => n.style.setProperty('background-clip', 'initial'));
document.querySelectorAll('.result').forEach((n) => n.style.setProperty(this.id, 'padding-box'));
}));Коментарі
Коментарів ще немає — будьте першим!