CSS - использование одного фонового изображения с несколькими изображениями на нем

Я заметил, что веб-сайты часто используют только одно фоновое изображение, содержащее на нем несколько изображений. Например, вместо использования отдельных значков все значки помещаются на одно изображение, а затем различные части изображения используются в разных разделах. Есть ли в этом преимущества? Также, как это можно использовать? Например, следующие изображения Yahoo, если я хочу отобразить второй значок в div, как бы я это сделал?

http://l1.yimg.com/a/i/ww/met/pa_icons_18/20101213/spr_apps_us.png

Спасибо.

Ответ 1

Этот метод называется CSS Sprites. В основном вы используете свойство CSS background-position и фиксированный height или width для вашего элемента.

Если ваши элементы фиксированной ширины и фиксированной высоты одновременно, вы можете свободно создавать более компактное изображение. См. этот сайт для более сложных примеров.

Ответ 2

Вы говорите о CSS-спрайтах, в которых фоновая позиция изменяется при зависании. Подробнее здесь:

http://css-tricks.com/css-sprites/

Ответ 3

Измените свойство css background-position.

Ответ 4

да, использование спрайтов хорошо для веб-сайта, потому что каждый отдельный компонент на веб-сайте отправляет разные запросы http. Так что, когда мы используем образы спрайтов, запрос http становится меньше, а производительность веб-сайта увеличивается. Это правило также применяется к css также меньше css файлов меньше HTTP-запроса. вы можете сами с помощью веб-инспектора сафари.

для более высокой производительности скачать "yslow"

Ответ 5

И с помощью спрайтов CSS также можно сделать, например. эффект наведения кнопки меню, не дожидаясь загрузки второго изображения. см.

Ответ 6

Преимущество состоит в том, что нужно загружать только одно изображение, чтобы ускорить такие действия, как зависание (roll-over). Эта техника обычно называется "CSS sprites". Google для этого.

Ответ 7

В течение некоторого времени было распространено два изображения на одном листе спрайта, но тенденция шла к объединению ВСЕХ ваших фоновых изображений на одном листе спрайта для загрузки всего одного файла для всех них. Здесь довольно хороший учебник здесь.