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.
Значень може бути кілька (для кожного з множинних фонових малюнків), при цьому значення поділяються між собою комою.
автор: Svitlana
Загальний опис
автор: NagarD
- Порада
-
Якщо фон заданий один, а значень
автор: Svitlanabackground-originкілька, то браузери покажуть різну поведінку. Firefox і Opera використовують перше значення, Chrome і Safari створять кілька фонових малюнків.
Синтаксис
background-origin: padding-box|border-box|content-box|initial|inherit;Властивість background-origin може отримувати 5 значень:
-
padding-box -
Фон позиціонується щодо краю елемента з урахуванням товщини кордону
автор: Svitlana -
border-box -
Фон позиціонується відносно кордону, при цьому лінія кордону може перекривати зображення
автор: Svitlana -
content-box -
Фон позиціонується відносно вмісту елемента
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивостей від свого батьківського елемента
автор: Svitlana
| Значення без задання: | padding-box |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.backgroundOrigin="content-box" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 4 | 3 | 10.5 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Однакові блоки з пунктирним бордером і відступами; background-origin зсуває точку, від якої відлічується зображення тла: від краю відступів (типово) чи від краю вмісту.
HTML
<div class="box">padding-box (типово)</div>
<div class="box content">content-box</div>CSS
.box {
display: inline-block;
width: 150px;
padding: 16px;
margin-right: 8px;
border: 4px dashed #999;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='13' cy='13' r='12' fill='%230172ad'/%3E%3C/svg%3E");
background-repeat: no-repeat;
}
.content {
background-origin: content-box;
}HTML
<h4>Властивість <code>background-origin</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-origin: padding-box; }
.bor { background-origin: border-box; }
.con { background-origin: 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: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='300'%20viewBox='0%200%20120%20120'%3E%3Crect%20width='120'%20height='120'%20fill='%23a8dadc'/%3E%3Crect%20y='84'%20width='120'%20height='36'%20fill='%23457b9d'/%3E%3Ccircle%20cx='94'%20cy='24'%20r='12'%20fill='%23f4a261'/%3E%3Cpath%20d='M0%2084%2034%2038%2066%2074%2084%2056%20120%2084Z'%20fill='%232a9d8f'/%3E%3C/svg%3E") no-repeat;
background-size: cover;
background-repeat: no-repeat;
background-size: 100% 100%;
display: inline-block;
padding: 16px;
}
p {
color:yellow;
text-align: center;
margin-top: 25%;
font-size: 3em;
}
div.padding-box {
background-origin: padding-box;
}
.border-box {
background-origin: border-box;
}
.content-box {
background-origin: content-box;
}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'));
}));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-origin', this.id));
}));Один бокс у скороченому записі задає й початок відліку, і обрізання. У другому блоці боксів два: градієнт так само починається від краю вмісту, але вже не обрізається — тому тиражується аж під рамку.
HTML
<div class="box one">background: linear-gradient(...) content-box</div>
<div class="box two">background: linear-gradient(...) content-box border-box</div>CSS
.box {
height: 70px;
padding: 18px;
margin-bottom: 14px;
border: 14px dashed rgba(0, 0, 0, .3);
color: #fff;
font: 12px sans-serif;
}
.one {
background: linear-gradient(135deg, #0172ad, #b7e0f7) content-box;
}
.two {
background: linear-gradient(135deg, #0172ad, #b7e0f7) content-box border-box;
}HTML
<p>Цей приклад показує як працює властивість <strong>background-size</strong>. Спробуйте ввімкнуити різні перемикачі, щоб змінити відображення фонового зображення нище.</p>
<div class="inputs">
<input id="auto" checked name="background-size" type="radio"/>
<label for="auto">auto</label>
<message for="auto">Без задання. Тло матиме натуральний розмір, такий, як у оригінальної картинки. Пропорції теж будуть ідентичними оригінальному зображенню.</message>
<input id="contain" name="background-size" type="radio"/>
<label for="contain">contain</label>
<message for="contain">Масштабує картинку так, щоб вона накрила собою весь блок зі збереженням пропорцій, так, щоб його ширина та висота дорівнювала ширині та висоті блок.</message>
<input id="cover" name="background-size" type="radio"/>
<label for="cover">cover</label>
<message for="cover">Масштабує картинку так, щоб вона цілком помістилася в блок із збереженням пропорцій. При цьому вона може зайняти або всю ширину, або всю висоту (залежить від пропорцій картинки і від розмірів елемента).</message>
</div>
<div class="m-box">
<p id="message">Без задання. Тло матиме натуральний розмір, такий, як у оригінальної картинки. Пропорції теж будуть ідентичними оригінальному зображенню.</p>
</div>
<div id="block"></div>CSS
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
message {
display: none;
}
#block {
width: 400px;
height: 400px;
margin: 36px auto;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' 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: padding-box;
background-size: auto;
padding: 16px;
border: 4px solid #4f4f4f;
}
.m-box {
min-height: 100px;
}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-size', this.id));
}));Коментарі
Коментарів ще немає — будьте першим!