Как создать ссылку из спрайта?

Question

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

Что можно сделать для создания ссылок из спрайтов?

Answer 1

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

Answer 2

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

// 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; 
} 

EDIT Edited сделать спрайт кликабельным. Новый код должен быть:

<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 3

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

Answer 4

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