Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.
Нажимай и поддержи.

Пн Вт Ср Чт Пт Сб Вс
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30


Чувашия-это моя Россия

Ссылки на каскадные стили CSS - background-origin.

Поддержка Браузеров

Internet Explorer Интернет эксплорер Google Chrome Google Chrome Opera Опера Firefox Firefox Safari Сафари, то есть поддерживается во всех основных браузерах.

Определение и использование. Свойство background-origin определяет то, что свойство фона положения должно быть по отношению к чему-либо. Если свойство фона привязанно для фонового изображения "fixed", то это свойство не имеет никакого эффекта, то есть теряет свою смысловую нагрузку. Таким образом, свойство background-origin задает точку, с которой будет начинаться фоновое изображение. Оно может начинаться от внутреннего края границы элемента, от внешнего края границы элемента или только в зоне контента.

Допустимые значения:

padding-box — фоновое изображение начинается от внутреннего края границы элемента
border-box — фоновое изображение начинается от внешнего края границы элемента
content-box —фоновое изображение начинается только в зоне контента.

Самое мощное здесь даже не в том, что производится некое изменение некого участка страницы сайта. Самое мощное здесь в том, что свойство background-origin, которое действует через стили CSS3 автономно работает даже при отключения JavaScripta в браузере Вашего компьютера.


Синтаксис:

                 background-origin: padding-box|border-box|content-box|initial|inherit;

Описание и Использование

Значение по умолчанию: padding-box
наследует: no
Версия: CSS3
JavaScript синтаксис: object.style.backgroundOrigin="content-box"


Свойства Значения

Значение Описание
padding-box Значение по умолчанию. Фоновое изображение располагается относительно заполнения поля
border-box Фоновое изображение располагается по отношению к границе box
content-box Фоновое изображение располагается по отношению к содержимому коробки
initial Это свойство задает значение по умолчанию.
inherit Наследует это свойство от своего родительского элемента.


Пишем программу - Расположить фон изображения по отношению к коробке содержимого:

< !DOCTYPE html>
< html>
< head>
< style> 
div.rr
{
border:1px solid black;
padding:35px;
background-image: url(../fon/609.jpg);
background-repeat:no-repeat;
background-position:left;
}
#div1.rr
{
background-origin:border-box;
}
#div2.rr
{
background-origin:content-box;
}
< /style>
< /head>
< body>

< p>background-origin:border-box:< /p>
< div id="div1" class="rr">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
< /div>

< p>background-origin:content-box:< /p>
< div id="div2" class="rr">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam 
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
< /div>

< /body>
< /html>                      

Результат программы:

background-origin:border-box:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

background-origin:content-box:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.



seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно на главную     назад    дальше     вперед

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: