CSS background-origin Свойство
Пример
Пусть фоновое изображение начинается с верхнего левого угла содержимого:
#example1 {
border: 10px double black;
padding:
25px;
background: url(paper.gif);
background-repeat: no-repeat;
background-origin:
content-box;
}
Подробнее примеры ниже.
Определение и использование
Свойство background-origin указывает исходную позицию (область расположения фона) фонового изображения.
Примечание: Это свойство не оказывает влияния, если фоновое вложение является «фиксированным».
| Значение по умолчанию: | padding-box |
|---|---|
| Inherited: | no |
| Animatable: | no. Читайте о animatable |
| Version: | CSS3 |
| Синтаксис JavaScript: | object.style.backgroundOrigin="content-box" |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| background-origin | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 |
Синтаксис CSS
background-origin: padding-box|border-box|content-box|initial|inherit;
Значения свойств
| Значение | Описание | |
|---|---|---|
| padding-box | Значение по умолчанию. Фоновое изображение начинается с верхнего левого угла края отступа | |
| border-box | Фоновое изображение начинается с верхнего левого угла границы | |
| content-box | Фоновое изображение начинается с верхнего левого угла содержимого | |
| initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) | |
| inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Другие примеры
Пример
Установите два фоновых изображения для элемента <div>. Пусть "paper.gif" фоновое изображение начинается с верхнего левого угла отступа края, и пусть "img_tree.gif" фоновое изображение начинается с верхнего левого угла содержимого:
#example1 {
border: 10px double black;
padding: 25px;
background: url(img_tree.gif), url(paper.gif);
background-repeat: no-repeat;
background-origin:
content-box, padding-box;
}
Похожие страницы
CSS Справочник: CSS Backgrounds
HTML DOM Справочник: backgroundOrigin Свойство