Question

在这个jsfiddle中我试图创建一个覆盖整个精灵图像的链接。但是出于某种原因，a的高度和宽度属性似乎不起作用。

如何从精灵图片创建链接？

Answer 1

将display:inline-block或display:block添加到a以获取有效的维度。维度不会对inline元素生效。

Answer 2

我已更新您的fiddle。该链接现在覆盖了整个图像，这是通过将链接转换为带有display：block的块元素来完成的，就像许多其他状态的答案一样。我还将id选择器添加到所有其他选择器，并将选择器和声明移动到实际背景图像被声明到顶部的位置。原因是li元素的背景位置因为缺少specificity而被覆盖，并且由于你的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，然后就可以了......

如何从精灵图像创建链接？

4 个答案: