Блог

Главная - Вопросы по программированию - Спрайт для элементов списка

Спрайт для элементов списка

#css #sprite

Вопрос:

Добрый день, я пытаюсь использовать спрайт значков социальных сетей для простого списка. Вот чего я ожидаю:

введите описание изображения здесь

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

 .sprite {
    background-image: url(img/spr.png);
    background-repeat: no-repeat;
    display: block;
}
.soc1 {
    width: 37px;
    height: 37px;
    background-position: 0 0;
}

.soc2 {
    width: 37px;
    height: 37px;
    background-position: 0 -37px;
}

.soc3 {
    width: 37px;
    height: 37px;
    background-position: 0 -74px;
} 
 <ul class="secondlist">
  <li class="secondlist_item">
    <a href="#" class="soc1" title="Facebook"></a>
  </li>
  <li class="secondlist_item">
    <a href="#" class="soc2" title="AskMe"></a>
  </li>
  <li class="secondlist_item">
    <a href="#" class="soc3" title="Twitter"></a>
  </li>
  <li class="secondlist_item">
    <a href="#" class="soc4" title="MySpace"></a>
  </li>
  <li class="secondlist_item">
    <a href="#" class="soc5" title="Feed"></a>
  </li>
</ul>

Комментарии:

1. Локально сохраненное изображение здесь не отображается. Не могли бы вы дать живую ссылку для URL-адреса изображения.

2. i.stack.imgur.com/raeiX.png вот оно

3. class="soc1" ничего не будет сделано, так как вы на самом деле не загрузили спрайт — попробуйте class="sprite soc1" также переместить ширину и высоту в класс спрайта, так как это согласуется со всеми другими классами, поэтому просто используйте soc1 etc для установки позиции

Ответ №1:

Как упоминалось в комментариях:

Вам нужно загрузить спрайт с классом, поэтому используйте, например

 class="sprite soc1"

Измените css на:

 .sprite {
    background-image: url(img/spr.png);
    background-repeat: no-repeat;
    display: block;
    width: 37px;
    height: 37px;
}
.soc1 {
    background-position: 0 0;
}

.soc2 {
    background-position: 0 -37px;
}

.soc3 {
    background-position: 0 -74px;
}

Затем вы просто используете, например soc1 , для установки положения спрайта.

Метки: