background-origin

Свойство background-origin CSS задаёт происхождение фона: от начала границы, внутри границы или внутри отступа.

Попробуйте

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

Синтаксис

/* Keyword values */
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

/* Global values */
background-origin: inherit;
background-origin: initial;
background-origin: revert;
background-origin: revert-layer;
background-origin: unset;

Свойство background-origin задаётся одним из значений ключевых слов, перечисленных ниже.

Значения

border-box: Фон позиционируется относительно области границы.
padding-box: Фон позиционируется относительно области отступа.
content-box: Фон позиционируется относительно области содержимого.

Формальное определение

Начальное значение	`padding-box`
Применяется к	всем элементам. Также применяется к `::first-letter` и `::first-line`.
Наследуется	нет
Вычисляемое значение	как указано
Тип анимации	повторяемый список

Формальный синтаксис

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("main-back.png"); /* Applies two images to the background */
  background-position:
    top right,
    0px 0px;
  background-origin: content-box, padding-box;
}

Использование двух градиентов

В этом примере у блока толстая пунктирная граница. Первый градиент использует padding-box в качестве background-origin, и поэтому фон располагается внутри границы. Второй использует content-box, поэтому отображается только за содержимым.

.box {
  margin: 10px 0;
  color: #fff;
  background: linear-gradient(
      90deg,
      rgb(131 58 180 / 100%) 0%,
      rgb(253 29 29 / 60%) 60%,
      rgb(252 176 69 / 100%) 100%
    ),
    radial-gradient(circle, rgb(255 255 255 / 100%) 0%, rgb(0 0 0 / 100%) 28%);
  border: 20px dashed black;
  padding: 20px;
  width: 400px;
  background-origin: padding-box, content-box;
  background-repeat: no-repeat;
}

<div class="box">Hello!</div>

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

Спецификация
CSS Backgrounds and Borders Module Level 3 # the-background-origin

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`background-origin`	1 1 Chrome принимает альтернативные синонимы для своих значений: `padding`, `border`, и `content`.	12 12 С Edge 79, принимает альтернативные синонимы для своих значений: `padding`, `border`, и `content`.	449 1–4 Использовался синтаксис `-moz-background-clip: padding \| border`.	10.5 15 Opera принимает альтернативные синонимы для своих значений: `padding`, `border`, и `content`.	3 3 Webkit принимает альтернативные синонимы для своих значений: `padding`, `border`, и `content`.	18 18 Chrome принимает альтернативные синонимы для своих значений: `padding`, `border`, и `content`.	449	11 14 Opera принимает альтернативные синонимы для своих значений: `padding`, `border`, и `content`.	1 1 Webkit принимает альтернативные синонимы для своих значений: `padding`, `border`, и `content`.	1.0 1.0 Samsung Internet принимает альтернативные синонимы для своих значений: `padding`, `border`, и `content`.	4 4 WebView принимает альтернативные синонимы для своих значений: `padding`, `border`, и `content`.
`border-box`	1	12	4	15	3	18	4	14	2	1.0	4.4
`content-box`	1	12	4	10.5	3	18	4	11	1	1.0	4
`padding-box`	1	12	4	15	3	18	4	14	2	1.0	4.4

См. также

background-clip

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin