Как изменить способ размножения фонового изображения
По умолчанию изображение будет повторяться, пока не заполнит все доступное пространство по горизонтали и по вертикали. Однако его по- ведением можно управлять с помощью свойства background-repeat.
Решение
Результат использования изображения с рис. 3.4 со значением no-repeat
свойства background-repeat.
Рис. 3.4. Заполнение фона страницы с помощью достаточно широкого изображения; свойству background-repeat присвоено свойство no-repeat
Высота изображения составляет лишь 400 пикселов, что гораздо мень- ше высоты типичной веб-страницы, поэтому ее фону был задан тот же цвет, что и у последнего ряда пикселов градиентного изображения. Та- ким образом происходит плавный переход от изображения к фону стра- ницы.
Такого эффекта можно добиться и более эффективным способом, со- стоящим в использовании меньшего по размеру изображения, которое быстрее загружается. Для этого нужно отрезать от нашего градиентно- го изображения тонкую полосу, как показано на рис. 3.5.
Рис. 3.5. Отрезанная полоса градиентного изображения
Задав свойству background-repeat для созданного изображения значение repeat-x, получим такой же результат, что и в первом примере, исполь- зуя при этом файл гораздо меньшего размера. Чтобы обеспечить сплош- ное покрытие отображаемой в броузере страницы градиентом, укажем в качестве ее фона цвет, совпадающий с нижней частью градиента.
Если бы градиентный переход осуществлялся не сверху вниз, а справа налево, для создания фоновой заливки можно было бы воспользоваться тем же методом, повернув эффект на 90 градусов. Взяв в качестве фоно- вого изображения горизонтальную полосу и указав свойству background- repeat значение repeat-y, мы обеспечиваем повторение градиента сверху вниз, как показано на рис. 3.6.
Рис. 3.6. Градиентное изображение со значением repeat-y свойства background-repeat
Литература: Эндрю Р. CSS: 100 и 1 совет, 3-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2010. – 336 с., ил.
Похожие посты:
- Индексирование содержимого (0)
- Базовый анализ поисковых запросов (0)
- Структурирование схемы контента (0)
- Указание поисковой системе Google на связи между блоками (0)
- Демонстрация поисковой системе Google целой страницы (0)
- Информирование поисковой системы Google о подборках страниц (0)
- Как избежать неинформативности (0)