css властивість background-origin
Властивість background-origin було додано в CSS3 і вона визначає область позиціонування фонового зображення (точку, з якої почнеться тло). Тло може починатися від внутрішнього краю грані елементу, від зовнішньої краю грані або тільки в зоні контенту.
На жаль цей малюнок не може наочно показати поведінку, котру задає ця властивість, але ти можеш подивитися 1 приклад.
background-origin схоже на background-clip, але перша властивість просто змінює розмір фону, а друга обрізає його.
Цю властивість можна використовувати у скороченому записі background, наприклад:
background: url("background.png") 40% / 10em lightblue round border-box;
Якщо background-origin не прописана спеціально, вона отримує значення без задання: padding-box.
Для потрібного ефекту потрібно також використовувати background-repeat: no-repeat;, в протилежному випадку, фонове зображення буде повторюватися й за межу вмісту.
Ця властивість не застосовується, коли значення background-attachment задано як fixed.
Значень може бути кілька (для кожного з множинних фонових малюнків), при цьому значення поділяються між собою комою.
| Порада: | Якщо фон заданий один, а значень |
Синтаксис
background-origin: padding-box|border-box|content-box|initial|inherit;Властивість background-origin може отримувати 5 значень:
padding-boxФон позиціонується щодо краю елемента з урахуванням товщини кордону
border-boxФон позиціонується відносно кордону, при цьому лінія кордону може перекривати зображення
content-boxФон позиціонується відносно вмісту елемента
initialВстановлює властивість у значення без задання
inheritВказує на спадковість властивостей від свого батьківського елемента
| Значення без задання: | padding-box |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.backgroundOrigin="content-box" |
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
| background-origin | 4.0 |
9.0 |
4.0 |
3.0 |
10.5 |
| Переглядач | |||
|---|---|---|---|
| background-origin | 3.0 |
4.0 |
5.0 |
Мобільних переглядачів ще не додано.
Приклади
Динамічний приклад
Демонстрація роботи властивості
Демонстрація роботи властивості
Демонстрація роботи властивості
Демонстрація роботи властивості
Синтаксис властивості
.box {
background-origin: padding-box;
}