css - 具有透明度的背景 Sprite 随 :hover and :active overlays instead of redraws 发生变化

Question

好吧，所以这只是我为一个元素所做的测试示例(未完善)。假设您将一张用于导航的图像设置为元素的背景，该图像具有透明度，并且当它发生变化时，图像的可见部分会减少。

我正在使用 iceweasel 10，当我这样做时， Sprite 的“缩小”版本只是绘制在之前的背景之上。这意味着先前的背景在较小 Sprite 的外部仍然可见。

这可以通过为 :active 指定背景颜色和新图像 Sprite 来“修复”，但是如何保持透明度呢？如果背景不是纯色(或已知)怎么办？

Here is the issue demonstrated在 html 中。 Here is the png用于 Sprite 。

这是我的浏览器渲染引擎的产物，还是 CSS 的标准？谢谢。

Answer 1

您的问题是一个背景被应用到a，而另一个在容器上。设置 a; 的背景不会清除容器的背景。替换:

#home{
left:0px;
width:46px;
background:url('img_navsprites_hover2.png') 0 0;
}
#home a:hover{
background: url('img_navsprites_hover2.png') 0 -45px;
}
#home a:active{
background: url('img_navsprites_hover2.png') 0 -90px;
}

与

#home {
    left: 0px;
    width: 46px;
}
#home a { background: url('img_navsprites_hover2.png') 0 0; }
#home a:hover{ background: url('img_navsprites_hover2.png') 0 -45px; }
#home a:active { background: url('img_navsprites_hover2.png') 0 -90px; }