css - 具有透明度的背景精灵用 :hover 和 :active 覆盖而不是重绘

Question

好的，所以这只是我正在为一个项目工作的一个测试示例（未完善）。假设您将用于导航的图像设置为元素的背景，该图像具有透明度，并且当它被更改时，图像的可见部分会减少。

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

这可以通过为 :active 指定背景颜色以及新的图像精灵来“修复”，但是保持透明度呢？如果背景不是纯色（或已知）颜色怎么办？

这是html中演示的问题。这是用于精灵的png 。

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

Answer 1

您的问题是一个背景应用于a，而另一个背景应用于容器。设置a;s 背景不会清除容器的背景。代替：

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