English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Свойство background-origin CSS определяет область позиционирования фона, то есть используетbackground-imageОпределяет положение точки отсчета изображения, указанного свойством.
В таблице ниже总结了 контекст использования и историю версий этого свойства.
| Значение по умолчанию: | padding-box |
|---|---|
| Применяется к: | всех элементов. Оно также применяется к::first-letterи::first-line. |
| Наследование: | Нет |
| Анимируемо: | Нет.См. также Анимационные свойства. |
| Версия: | Новая функция CSS3 |
| Синтаксис JavaScript: | object object.style.backgroundOrigin="content-box" |
Синтаксис этого атрибута следующий:
Синтаксис этого атрибута следующий: background-origin: border-box | padding-box | content-box | initial | inherit
Ниже приведен пример того, как использовать атрибут background-origin.
.box {
width: 250px;
height: 150px;
padding: 10px;
border: 6px dashed #333;
background: url("images/sky.jpg") no-repeat;
background-size: contain;
background-origin: content-box;
}Тестировать, посмотреть <›/›Примечание:Если значение атрибута background-origin игнорируетсяbackground-attachmentАтрибут установлен в значение fixed.
В таблице ниже описаны значения этого атрибута.
| Значение | Описание |
|---|---|
| border-box | Указать, что фоновое изображение должно распространяться за пределы внешнего края границ. Фон рисуется под границами. |
| padding-box | Указать, что фоновое изображение должно распространяться за пределы внешнего края заполнения. Фон не рисуется под границами. Это значение по умолчанию. |
| content-box | Указать, что фоновое изображение должно быть нарисовано только в области содержимого (вырезано). Фон не рисуется под границами и областью заполнения. |
| initial | Установить этот атрибут в его значение по умолчанию. |
| inherit | Если указано, то элементы, связанные с ним, используют вычисленное значение атрибута background-origin родительского элемента. |
Совместимость браузеров для атрибута background-origin, все основные браузеры поддерживают этот атрибут.
|
Узнайте больше из следующих учебников:CSS3 фоновое изображение,CSS3 фоновое изображение.
Связанные атрибуты:background,background-attachment,background-color,background-image,background-clip,background-position,background-repeat,background-size.