Как статичные png объединить в sprite (см. код)?


Mahol
340

Всем доброго дня.

На главной сайта есть статичные png и анимированные gif, которые запускаются при наведении курсора.

Как статичные объединить в спрайт? Пробую, но не получается — картинку не видно.

Код HTML:

<center><div class="wefg"><a class="gif3"><img src="https://www.***.ru/wp-content/uploads/2019/04/11.gif" alt="" /></a></div></center>

В style.css такой код, скрывающий гифку и показывающий статичную png:

.gif3 {

display:block; /* Устанавливаем */
width:88px; /* Ширина и высота картинки */
height:88px;
background:url('https://***.ru/wp-content/uploads/2019/04/1.png') no-repeat; /* Заливаем блок статичной картинкой */
}

a.gif3 img {
visibility:hidden; /* Aнимация не была видна в ситуации, когда мышь не наведена */
}

a.gif3:hover {
background:none; /* Фон (статичное изображение) не было видно при наведении мыши */
}

a.gif3:hover img {
visibility:visible; /* При наведении анимация показывается */
border:0; /* без обрамления ;) */
}



jpg

pr.jpg


silicoid

для переключения между картинками в спрайте используют css свойство background-position: с указанием абсолютного смещения


Mahol

silicoid:
для переключения между картинками в спрайте используют css свойство background-position: с указанием абсолютного смещения

Хорошо, но это не подходит для gif, я правильно понимаю?


Sitealert

Mahol:
Хорошо, но это не подходит для gif, я правильно понимаю?

Какая разница?


Mik Foxi

Mahol:
Хорошо, но это не подходит для gif, я правильно понимаю?

для анимированного гифа не подходит.


Sitealert

foxi:
для анимированного гифа не подходит.

А про анимированные речь и не шла

Mahol:
Как статичные объединить в спрайт?


Mahol

Sitealert:
А про анимированные речь и не шла

Да, изначально речь не шла — мой вопрос был следствием ответа silicoidа.


Sitealert

Mahol:
мой вопрос был следствием ответа silicoidа.

silicoid просто написал, по какому принципу работает спрайт.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *