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
Фон располагается относительно поля содержимого.

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

<box>#

где
<box> = 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;
}

Спецификации

Спецификация Статус Комментарий
CSS Backgrounds and Borders Module Level 3
Определение 'background-origin' в этой спецификации.
Кандидат в рекомендации Первоначальное определение
Начальное значениеpadding-box
Применяется квсе элементы. Это также применяется к ::first-letter и ::first-line.
Наследуетсянет
Обработка значениякак указано
Animation typediscrete

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

BCD tables only load in the browser

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