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

Фон располагается относительно поля содержимого.

Официальный синтаксис

background-origin = 
<box># (en-US)

<box> =
border-box | (en-US)
padding-box | (en-US)
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 typediscrete

Совместимость браузеров

BCD tables only load in the browser

Смотрите также