This page was translated from English by the community.Learn more and join the MDN Web Docs community.
background-origin
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..
CSS свойствоbackground-origin устанавливаетобласть расположения фона. Другими словами, оно устанавливает исходную позицию изображения, установленную с помощью свойстваbackground-image.
Интерактивный пример
background-origin: border-box;background-repeat: no-repeat;background-origin: padding-box;background-repeat: no-repeat;background-origin: content-box;background-repeat: no-repeat;<section> <div>This is the content of the element.</div></section>#example-element { background-image: url("/shared-assets/images/examples/leopard.jpg"); color: #d73611; text-shadow: 2px 2px black; padding: 20px; border: 10px dashed #333; font-size: 2em; font-weight: bold;}Обратите внимание, чтоbackground-origin игнорируется, когдаbackground-attachment являетсяfixed.
Примечание:Сокращениеbackground сбрасывает значения этого свойства к его начальному значению, если оно не указано.
Синтаксис
/* Ключевые слова */background-origin: border-box;background-origin: padding-box;background-origin: content-box;/* Глобальные значения */background-origin: inherit;background-origin: initial;background-origin: unset;Свойствоbackground-origin указывается в качестве одного из значений ключевых слов, перечисленных ниже.
Значения
border-boxФон располагается относительно рамки.
padding-boxФон расположен относительно поля отступа.
content-boxФон располагается относительно поля содержимого.
Официальный синтаксис
background-origin =
<visual-box>#
<visual-box> =
content-box|
padding-box|
border-box
Примеры
.example { border: 10px double; padding: 10px; background: url("image.jpg"); background-position: center left; background-origin: content-box;}#example2 { border: 4px solid black; padding: 10px; background: url("image.gif"); background-repeat: no-repeat; background-origin: border-box;}div { background-image: url("logo.jpg"), url("mainback.png"); /* Applies two images to the background */ background-position: top right, 0px 0px; background-origin: content-box, padding-box;}Спецификации
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # background-origin |
| Начальное значение | padding-box |
|---|---|
| Применяется к | все элементы. Это также применяется к::first-letter и::first-line. |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | повторяющийся список из |