Интересные эффекты

С технической точки зрения, когда фоновое изображение зафиксировано (fixed), оно размещается с учетом области просмотра, а не элемента, содержащего его. Однако фон будет видимым только в рамках его элемента-контейнера. Это ведет к весьма интересным последствиям. Скажем, имеется документ с мозаичным фоном, который действительно выглядит как мозаика, и элемент h1 с таким же шаблоном, но другого цвета. И у элемента body, и у элемента h1 фоновое изображение зафиксировано (fixed), что в результате обеспечивает примерно следующее:

body {background-image: url(grid1.gif); background-repeat: repeat;
background-attachment: fixed;}
h1 {background-image: url(grid2.gif); background-repeat: repeat;
background-attachment: fixed;}

Как достигается такое идеальное выравнивание? Помните: если фон зафиксирован (fixed), исходный элемент размещается относительно окна просмотра. Таким образом, оба шаблона фона начинаются от верхнего левого угла окна просмотра, а не относительно отдельных элементов. Для body виден повторяющийся шаблон. Фон для элемента h1, однако, виден только в области отступов и содержимого самого h1. Поскольку оба фоновых изображения имеют один размер и начинаются в одной точке, получается что они «выровнялись».


Эта возможность помогает создавать ряд очень сложных эффектов. Один из самых известных примеров – демонстрация «искажения сложной спирали» (http://www.1111.com/eric/css/edge/complexspiral/ glassy.html).

Визуальные эффекты обусловлены присваиванием различных фиксированных фоновых изображений элементам, не являющимся элементами body. Вся демонстрационная версия состоит из одного HTML-документа, четырех JPEG-изображений и таблицы стилей. Поскольку все четыре изображения размещены в верхнем левом углу окна броузера, но видимы только там, где пересекаются со своими элементами, изображения эффектно чередуются, создавая иллюзию полупрозрачного волнистого стекла. Internet Explorer для Windows вплоть до IE6 неправильно обрабатывает фиксированные фоны в отличных от body элементах. Иначе говоря, ожидаемый эффект достигается только для фиксированного фона элемента body, но не для других элементов.

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

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Воздействие на рамки
Воздействие на элементы формы
Еще раз о повторении в определенном направлении
Замещение атрибутов
Значения, заданные в единицах измерения длины

Вернуться в раздел: CSS / 9. Цвета и фон