background-origin

CSS свойство background-origin устанавливает область расположения фона. Другими словами, оно устанавливает исходную позицию изображения, установленную с помощью свойства background-image.

Интерактивный пример

Обратите внимание, что background-origin игнорируется, когда background-attachment является fixed.

Примечание: Сокращение background сбрасывает значения этого свойства к его начальному значению, если оно не указано.

Синтаксис

css

/* Ключевые значения */
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

Примеры

css

.example {
  border: 10px double;
  padding: 10px;
  background: url("image.jpg");
  background-position: center left;
  background-origin: content-box;
}

css

#example2 {
  border: 4px solid black;
  padding: 10px;
  background: url("image.gif");
  background-repeat: no-repeat;
  background-origin: border-box;
}

css

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

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