Question

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

这是image =＆gt;不会让我发布图片，但它是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>

我目前只获得白色文字中的“低级计划”。谢谢！

Answer 1

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

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

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

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

请注意，我还在这里删除了背景图像声明，因为您可以将其移动到a.image样式块中。

在锚标签中使用不同的图像（链接，访问等）

1 个答案: