Я заметил, что веб-сайты часто используют только одно фоновое изображение, содержащее на нем несколько изображений. Например, вместо использования отдельных значков все значки помещаются на одно изображение, а затем различные части изображения используются в разных разделах. Есть ли в этом преимущества? Также, как это можно использовать? Например, следующие изображения Yahoo, если я хочу отобразить второй значок в div, как бы я это сделал?
http://l1.yimg.com/a/i/ww/met/pa_icons_18/20101213/spr_apps_us.png
Спасибо.
Этот метод называется CSS Sprites. В основном вы используете свойство CSS background-position и фиксированный height или width для вашего элемента.
Если ваши элементы фиксированной ширины и фиксированной высоты одновременно, вы можете свободно создавать более компактное изображение. См. этот сайт для более сложных примеров.
Вы говорите о CSS-спрайтах, в которых фоновая позиция изменяется при зависании. Подробнее здесь:
Измените свойство css background-position.
да, использование спрайтов хорошо для веб-сайта, потому что каждый отдельный компонент на веб-сайте отправляет разные запросы http. Так что, когда мы используем образы спрайтов, запрос http становится меньше, а производительность веб-сайта увеличивается. Это правило также применяется к css также меньше css файлов меньше HTTP-запроса. вы можете сами с помощью веб-инспектора сафари.
для более высокой производительности скачать "yslow"
И с помощью спрайтов CSS также можно сделать, например. эффект наведения кнопки меню, не дожидаясь загрузки второго изображения. см.
Преимущество состоит в том, что нужно загружать только одно изображение, чтобы ускорить такие действия, как зависание (roll-over). Эта техника обычно называется "CSS sprites". Google для этого.
В течение некоторого времени было распространено два изображения на одном листе спрайта, но тенденция шла к объединению ВСЕХ ваших фоновых изображений на одном листе спрайта для загрузки всего одного файла для всех них. Здесь довольно хороший учебник здесь.