Авторский знак. 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 31


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

Размещение изображений в CSS.

( продолжение)

Процентные величины свойства позицинирования подчинены той же базовой модели позиционирования, что и ключевые слова, но обеспечивают более точный контроль над положением изображения. Задают процентные величины парами «горизонталь-вертикаль»; значение же пары по умолчанию составляет 0% 0%, что означает размещение левого верхнего угла иллюстрации в левом верхнем углу элемента как такового. Любое заданное в процентах значение распространяется и на область полотна фона, и непосредственно на рисунок. Прояснят сказанное несколько элементарных примеров.

• Пара значений 50% 5 0 % располагает центр рисунка в центре самого элемента.

• Пара значений 100% 100% фиксирует правый нижний угол рисунка в правом ниж¬нем углу элемента как такового.

• Пара значений 10% 25% соотносит точку, отстоящую на 10% от левого и на 25% от верхнего края изображения, с такой же точкой на элементе.

Как и для ключевых слов, при указании только одной процентной величины из пары вторая предполагается равной 50%.

Смешение значений, выраженных в процентах и единицах длины, великолепная вещь, заметно упрощающая задание того, что изображение нужно центрировать в элементе горизонтально и отодвинуть от его верха ровно на 35 пикселей. CSS 2.1 позволяет попеременно использовать также длины и ключевые слова или наоборот:



Размещение при повторах.

В предыдущих примерах свойство background-repeat для ясности было установлено в no-repeat. Однако принцип определения положения не меняется и в том случае, если изображение повторяется. При указании обоих свойств отправной точкой мозаичного шаблона служит должным образом размещенное исходное изображение фона. Немаловажно заметить, что мозаичный шаблон строится в обе стороны. Поэтому, если изображение расположено в центре и задан горизонтальный повтор, мозаика сформируется как с левой стороны, так и с правой. Аналогично и вертикальный шаблон растянется и кверху и книзу от изображения оригинала; для обеспечения надежного центрирования рисунка в окне браузера используется как background-position, так и свойство background-repeat:

 
                     body {
                              background-image: url(../fon/625.jpg); 
                              background-position: center; 
                              background-repeat: repeat-x;
                               }

Закрепление фона.

По умолчанию, если пролистать документ, описанные в CSS фоновые рисунки перемещаются по экрану, как будто они «приклеены» к элементу. Именно так ведут себя фоновые изображения, определяемые для body. Спецификация CSS содержит свойство background-attachment, которое разрывает связь фонового изображения с содержимым и позволяет изображению занимать неизменное положение и при листании документа. По сути, оно «отвязывает» изображение от содержимого и привязывает его к области просмотра страницы (как правило, к окну браузера).

Свойство background-attachment. Значения:

                               scroll
                               fixed
                               inherit

Начальное значение: scroll. Применимо: Ко всем элементам. Наследуется: Нет. Значение background-attachment по умолчанию равно scroll, а потому, если свойство не задано, исходный рисунок будет непрерывно перемещаться. Альтернативой scroll служит fixed значение, «прикрепляющее» рисунок к определенной позиции по отношению к зоне просмотра. В примере фоновое изображение зафиксировано.

                 div {
                  background-image: url(../fon/625.jpg) ;
                  background-position: top;
                  background-repeat: no-repeat;
                  background-attachment: fixed; }

В этом примере Вы видите, что при прокручивании страницы вверх наше изображение появляется верхней части окна и там же остается в процессе прокручивания и исчезает по мере удаления нашего блока div. То есть мы задали свойство background-attachment: fixed; фиксированное положение в верхней части блока, так и наше изображение остается не изменным в этой точке, хотя при прокуручивании сам блок движется на верх. Мы замечаем, что отличием прокручиваемых исходных изображений от закрепленных является то, что у последних значение свойства background-position определяется относительно левого верхнего угла зоны просмотра, не самого элемента. Поэтому возникает интересный эффект: при наложении закрепленного фонового изображения на элемент ( данном нашем случае div) изображение остается на одном месте, прямоугольник ( div), отображает соответствующий фрагмент фонового изображения.


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
... ... ...

обратно    назад    дальше     продолжение темы

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