background-origin
CSS свойство background-origin
устанавливает область расположения фона. Другими словами, оно устанавливает исходную позицию изображения, установленную с помощью свойства background-image
.
Интерактивный пример
Обратите внимание, что 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
-
Фон располагается относительно поля содержимого.
Официальный синтаксис
Примеры
.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 # the-background-origin |
Начальное значение | padding-box |
---|---|
Применяется к | все элементы. Это также применяется к ::first-letter и ::first-line . |
Наследуется | нет |
Обработка значения | как указано |
Animation type | повторяющийся список из |
Совместимость с браузерами
BCD tables only load in the browser