css властивість background-clip


Властивість background-clip визначає, як колір чи картинка тла має виводитися під гранями. Ефект помітний при напівпрозорих (зі значенням transparent) або пунктирних гранях.

Властивість `background-clip`

Властивість 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;


}

Додаткові посилання