21111111111Rating 2.00 (1 Vote)

Или иначе использование CSS-спайтов позволяет значительно оптимизировать загрузку web страниц, допустим на странице есть несколько блоков, с градиентным фоном, где фон - это изображение заполняющее блок по оси Х, как можно поступить - первый вариант, создать для каждого блока отдельное изображение и назначить соответствующее изображение фоном, можно поступить иначе, используя так называемые CSS Image Sprites, что экономит место, количество файлов, время загрузки страницы...

Итак в наличии несколько горизонтальных блоков, растянувшихся на всю страницу, один высотой в 30px заполненный зеленым градиентом, другой в 80 заполненный темным градиентом, необходимо создать картинку (в моем случае это Photoshop) высотой в 110px, добавить 80 в низ и 30 вверх.

menu bot bg

В таблице стилей при задании фона первого и второго указываем это изображение, только у 80-ти пиксельного указываем отклонение от верха значение в -30px:

#div1{
    height:30px;
    width:100%;
    background: url(../images/bg.png) repeat-x #6BA042;    
}


#div2{
    height:80px;
    width:100%;
    background: url(/../images/bg.png) repeat-x #1B1B1B 0 -30px;    
}

Думаю из выше приведенного примера все довольно понятно.

Добавить комментарий


Защитный код
Обновить

Сейчас 289 гостей и ни одного зарегистрированного пользователя на сайте

Вверх
Вниз