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

Question

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

• Есть ли в этом преимущество?
• Как это можно использовать?

Например, для следующего спрайта переполнения стека, как бы я отобразил только одно из изображений?

Answer 1

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

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

Answer 2

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

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

Answer 3

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

Answer 4

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

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

Answer 5

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

Answer 6

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

Answer 7

Преимущество заключается в том, что необходимо загружать только одно изображение, чтобы такие эффекты, как при наведении курсора мыши, выполнялись быстрее. Техника обычно называется «CSS-спрайты». Google для этого.