Свойство CSS background-origin
Свойство CSS background-origin определяет область позиционирования фона для background-image.
Свойство background-origin является одним из свойств CSS3.
Если для background-attachment установлено значение fixed, свойство background-origin игнорируется.
| Начальное значение | padding-box |
|---|---|
| Применяется ко | Ко всем элементам. Также применяется к ::first-letter и ::first-line. |
| Наследуется | Нет. |
| Анимация | Нет. |
| Версия | CSS3 |
| Синтаксис DOM | object.style.backgroundOrigin = "content-box"; |
Синтаксис
Синтаксис свойства CSS background-origin
css
background-origin: padding-box | border-box | content-box | initial | inherit;Пример использования свойства background-origin:
Пример свойства CSS background-origin со значением padding-box
html
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.example1 {
border: 5px dashed #666;
padding: 35px;
background: url("https://ru.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg");
background-repeat: no-repeat;
background-origin: padding-box;
}
</style>
</head>
<body>
<h2>Background-origin property example</h2>
<p>Here the background-origin is set to "padding-box".</p>
<div class="example1">
<h2>Hello world.</h2>
<p> Some text for example.</p>
</div>
</body>
</html>Результат
Ниже приведен пример, демонстрирующий разницу между padding-box и content-box.
Пример свойства background-origin со значениями "padding-box" и "content-box":
Пример свойства CSS background-origin со значениями padding-box и content-box
html
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.example1 {
border: 5px dashed #666;
padding: 35px;
background: url("https://ru.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-repeat: no-repeat;
background-origin: padding-box;
}
.example2 {
border: 5px dashed #666;
padding: 35px;
background: url("https://ru.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-repeat: no-repeat;
background-origin: content-box;
}
</style>
</head>
<body>
<h2>Background-origin property example</h2>
<p>Here the background-origin is set to "padding-box" which is the default value of this property.</p>
<div class="example1">
<h2>Hello world</h2>
<p> Some text for example.</p>
</div>
<p>Here the background-origin is set to "content-box".</p>
<div class="example2">
<h2>Hello world</h2>
<p> Some text for example.</p>
</div>
</body>
</html>В приведенном ниже примере показано, как задать два фоновых изображения для элемента div с разными значениями.
Пример свойства background-origin с разными значениями:
Пример свойства CSS background-origin со значениями content-box и border-box
html
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
#example1 {
border: 5px double black;
padding: 25px;
background: url("https://ru.w3docs.com/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("https://ru.w3docs.com/uploads/media/default/0001/02/aa55a168be25d7d121dcab8d67ad72ce021dcde3.png");
background-repeat: no-repeat;
background-origin: content-box, border-box;
}
#example2 {
border: 5px double black;
padding: 25px;
background: url("https://ru.w3docs.com/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("https://ru.w3docs.com/uploads/media/default/0001/02/aa55a168be25d7d121dcab8d67ad72ce021dcde3.png");
background-repeat: no-repeat;
background-origin: content-box, padding-box;
}
#example3 {
border: 5px double black;
padding: 25px;
background: url("https://ru.w3docs.com/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("https://ru.w3docs.com/uploads/media/default/0001/02/aa55a168be25d7d121dcab8d67ad72ce021dcde3.png");
background-repeat: no-repeat;
background-origin: content-box, content-box;
}
</style>
</head>
<body>
<h2>Background-origin property example</h2>
<p>Here the background-origin: content-box, border-box; is set:</p>
<div id="example1">
<h2>Hello World</h2>
<p>The first background-image starts from the upper left corner of the content.</p>
<p>The second background-image starts from the upper left corner of the border.</p>
</div>
<p>Here the background-origin: content-box, padding-box:</p>
<div id="example2">
<h2>Hello World</h2>
<p>The first background image starts from the upper left corner of the content.</p>
<p>The second background-image starts from the upper left corner of the padding edge.</p>
</div>
<p>Here the background-origin: content-box, content-box; is set:</p>
<div id="example3">
<h2>Hello World</h2>
<p>Both background images start from the upper left corner of the content.</p>
</div>
</body>
</html>Значения
| Значение | Описание | Запустить |
|---|---|---|
| border-box | background-position относительно рамки (border box), фоновое изображение начинается с верхнего левого угла рамки. | Запустить » |
| padding-box | background-position относительно внутреннего отступа (padding box), фоновое изображение начинается с верхнего левого угла внутреннего отступа. Это значение по умолчанию. | Запустить » |
| content-box | background-position относительно контента (content box), фоновое изображение начинается с верхнего левого угла контента. | Запустить » |
| initial | Устанавливает свойству значение по умолчанию. | Запустить » |
| inherit | Наследует свойство от родительского элемента. |
Practice
Что контролирует свойство CSS background-origin?