Как использовать одно изображение частей в качестве фона для разных элементов

Одна картинка

Как веб-сайт может использовать одно изображение и использовать его части в качестве фона для разных элементов, Как этого достичь.

Источник

2 ответа

Решение

Они просто используют различные положения фона, чтобы указать, какое изображение на листе спрайта / изображении они используют. Например, осмотрите элемент изображения НЛО, которое вы выделили выше. И изменить css background position to -390px тогда выше и ниже изображения станут такими же, как положительные, указанные будут одинаковыми.

Это сделано для уменьшения нагрузки на сервер, поскольку теперь загружается только одно изображение - основное изображение вместо 10 разных.

Смотрите это jsFiddle здесь, я использовал это изображение и просто использую различные фоновые позиции для каждого кода CSS IMG. Пожалуйста, спросите, если вам нужны дополнительные разъяснения.

Источник

Вы можете установить этот фон для любого диапазона. Остальное сделать, это вырезать правую часть.

Допустим, у вас есть один класс для изображения, это:

.sp {
    background-image: url(your/picture.png);
}

Вы применяете этот класс ко всем пролетам, которым нужна картинка. Затем вы вырезаете из него отдельные картинки:

.sp.button1 {
    background-position: 20px 50px;
    height: 28px;
    width: 50px
}

(случайные номера)

Вы можете указать свою первую фотографию с class="sp button1" затем.

Источник
Другие вопросы по тегам