Листы спрайта не отображаются - PullRequest
Новая
       28

Листы спрайта не отображаются

0 голосов
/ 16 сентября 2018

Я использую спрайт-лист для кнопок социальных сетей, но я не могу показать изображения ...?

Есть что-то явно очевидное, что я делаю не так? 

.socials {
  display: inline-block;
  width: 40px;
  height: 40px;
  overflow: auto;
}

#menubar_top .socials .facebook .fb {
  background: url(images/social-media-logo-set1.png) 0px 0px;
  width: 40px;
  height: 40px;
}

#menubar_top .socials .facebook .fb:hover {
  background: url(images/social-media-logo-set1.png) 0px 0px;
}
<div class="socials">
  <a class="facebook" target="_blank" href="http://facebook.com"><img class="fb" src="images/placeholders/40x40.png" /></a>
</div>

Вот изображение: социальный спрайт

1 Ответ

0 голосов
/ 17 сентября 2018

Ниже приведен пример использования предоставленного вами изображения.

  • При наведении курсора вам нужно изменить положение фона для спрайта
  • Сам спрайт, не содержит правильных размеров для социальных изображений 

.socials .facebook {
  background: url(https://i.stack.imgur.com/WwCI4.png) -18px -13px;
  width: 40px;
  height: 40px;
  display: block;
}

.socials .facebook:hover {
  background: url(https://i.stack.imgur.com/WwCI4.png) -18px -105px;
}
<div class="socials">
  <a class="facebook" target="_blank" href="http://facebook.com"></a>
</div>
...