Как статичные png объединить в sprite (см. код)?22.05.2021 От: faq Из: Веб-строительство Mahol 25 мая 2020, 09:01 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 25 мая 2020, 11:38для переключения между картинками в спрайте используют css свойство background-position: с указанием абсолютного смещения Mahol 30 мая 2020, 07:44silicoid:для переключения между картинками в спрайте используют css свойство background-position: с указанием абсолютного смещенияХорошо, но это не подходит для gif, я правильно понимаю? Sitealert 30 мая 2020, 08:11Mahol:Хорошо, но это не подходит для gif, я правильно понимаю?Какая разница? Mik Foxi 30 мая 2020, 08:37Mahol:Хорошо, но это не подходит для gif, я правильно понимаю?для анимированного гифа не подходит. Sitealert 30 мая 2020, 08:41foxi:для анимированного гифа не подходит.А про анимированные речь и не шлаMahol:Как статичные объединить в спрайт? Mahol 30 мая 2020, 09:42Sitealert: А про анимированные речь и не шлаДа, изначально речь не шла — мой вопрос был следствием ответа silicoidа. Sitealert 30 мая 2020, 09:49Mahol:мой вопрос был следствием ответа silicoidа.silicoid просто написал, по какому принципу работает спрайт. Похожие записи:Использование свойств класса в другом классе Подготовленный запрос PDO написать юзая MYSQLI Вывод имени изображения из бд в форму Чтение Json в массив PHP Примеры поделок от новичков или первый блин комом
Mahol
Всем доброго дня.
На главной сайта есть статичные png и анимированные gif, которые запускаются при наведении курсора.
Как статичные объединить в спрайт? Пробую, но не получается — картинку не видно.
Код HTML:
В style.css такой код, скрывающий гифку и показывающий статичную png:
jpg
pr.jpg
silicoid
для переключения между картинками в спрайте используют css свойство background-position: с указанием абсолютного смещения
Mahol
для переключения между картинками в спрайте используют css свойство background-position: с указанием абсолютного смещения
Хорошо, но это не подходит для gif, я правильно понимаю?
Sitealert
Хорошо, но это не подходит для gif, я правильно понимаю?
Какая разница?
Mik Foxi
Хорошо, но это не подходит для gif, я правильно понимаю?
для анимированного гифа не подходит.
Sitealert
для анимированного гифа не подходит.
А про анимированные речь и не шла
Как статичные объединить в спрайт?
Mahol
А про анимированные речь и не шла
Да, изначально речь не шла — мой вопрос был следствием ответа silicoidа.
Sitealert
мой вопрос был следствием ответа silicoidа.
silicoid просто написал, по какому принципу работает спрайт.