0

我试图让不同的图像显示锚标签的不同状态，但我无法让它工作。关于我在这里缺少什么的任何想法？

这是图片 => 不允许我发布图片，但它是 480x30 像素

这是CSS；

a.image {
background-repeat:no-repeat;
color:white;
display:inline-block;
width:160px;
height:30px;
margin-left:-12px;
margin-top:16px;
padding-top:6px;
text-align:center;
font-size:14px;
font-weight:bold;
cursor:pointer;
text-decoration:none;
}

a.image:link {
background-image:url('images/buttons.png');
background-position:0px 320px;
}

a.image:visited {
background-image:url('images/buttons.png');
background-position:0px 0px;
}

a.image:active {
background-image:url('images/buttons.png');
background-position:0px 160px;
}

这是HTML；

<a href='ifp.asp?width=1512&ProjectGroupID=&ProductID=536&model=Addison 536&plan=Lower Level Plan' class='image'>Lower Level Plan</a>

我目前只得到白色文本的“低级计划”。谢谢！

4

1 回答 1

1

如果您的精灵是 480 W x 30 H，您应该在 X 轴上更改背景位置时，您正在更改 y 轴上的背景位置。您还应该使用 -X 尺寸来指示精灵需要移动负方向（向左）所以你可以这样重写：

a.image:link {
background-position:-320px 0px;
}

a.image:visited {
background-position:0px 0px;
}

a.image:active {
background-position:-160px 0px;
}

请注意，我还在这里删除了 background-image 声明，因为您可以简单地将其移动到 a.image 样式块中。

于 2012-08-15T19:41:15.990 回答