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;).
Синтаксис
background-clip: border-box|padding-box|content-box|initial|inherit;Властивість background-clip може отримувати 5 значень:
padding-boxТло відображається до граней елемента.
border-boxТло відображається під гранями елемента. Без задання.
content-boxТло відображається тільки всередині контенту.
initialВстановлює властивість у значення без задання
inheritВказує на спадковість властивості від свого батьківського елемента
| Значення без задання: | border-box |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.backgroundClip="content-box" |
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
| background-clip | 4.0 |
9.0 |
4.0 |
3.0 |
10.5 |
| Переглядач | |||
|---|---|---|---|
| background-clip | 2.1 |
4.0 |
3.2 |
Мобільних переглядачів ще не додано.
Приклади
Динамічний приклад
Демонстрація роботи властивості
Переглянь як працюють всі три значення властивості background-clip
Демонстрація роботи властивості
Демонстрація роботи властивості
Синтаксис властивості
.box {
background-clip: padding-box;
}