Как мне создать ссылку из спрайт-изображения?

Question

В этом jsfiddle Я пытаюсь создать ссылку, которая покрывает все изображение спрайта.По какой-то причине атрибуты высоты и ширины a не работают.

Что я могу сделать, чтобы создавать ссылки из спрайтовых изображений?

Answer 1

добавьте display:inline-block или display:block к a, чтобы размеры работали.размеры не вступают в силу для inline элементов.

Answer 2

Я обновил вашу скрипку . Теперь ссылка покрывает все изображение, и это делается путем превращения ссылки в элемент block с display: block, как и во многих других приведенных выше ответах. Я также добавил селектор идентификатора ко всем вашим другим селекторам и переместил селектор и объявление, где фактическое фоновое изображение объявляется вверху. Причина этого заключается в том, что background-position элемента li были перезаписаны из-за отсутствия специфичности и из-за порядка ваших объявлений CSS.

Answer 3

Используйте это

// Code shifted to the end.

Где CSS похож на это:

.sprite-sp1{ 
    background-position: 0 0; 
    width: 242px; 
    height: 244px; 
} 
.sprite-sp1 a{
    width: 242px;
    height: 244px;
    border: 1px solid;
}
.sprite-sp2{ 
    background-position: 0 -294px; 
    width: 241px; 
    height: 244px;
} 
#container li {
    background: url(http://i.imgur.com/iDrt8.png) no-repeat top left;
}

РЕДАКТИРОВАТЬ Отредактировано, чтобы спрайт можно было нажимать.Новый код должен быть:

<ul id="container">
    <li><a href="http://google.com/"><span class="sprite-sp1"></span>test</a></li>
    <li><span class="sprite-sp1"></span></li>
</ul>

Answer 4

Добавьте display:block; к a, тогда будет работать ...