css - 在 CSS2 标准中更改图像悬停的 alpha？

Question

我正在尝试为我的图像添加 alpha 效果。图像为圆角矩形。我知道有属性可以更改 CSS3 中的 alpha，但我正在尝试符合仍然是 CSS2 的 w3c 标准。

抱歉，我之前没有正确陈述我的问题。当我使用 CSS2 将鼠标悬停在图像上时，我试图更改 alpha。我正在考虑将“背景图像”用于 100% alpha，并将 img 标签用于 50% alpha。有没有更好的方法来做到这一点？

Answer 1

如果图像是PNG，您可以直接在图像中包含 alpha。当然，这需要 IE6 的PNG Fix脚本。

否则，您可以使用 CSS 设置透明度。

编辑：更新为仅适用于悬停，请注意这在 IE6 中不起作用。

img.transparent{
    filter: alpha(opacity=100); /* internet explorer */
    opacity: 1;           /* fx, safari, opera, chrome */
}

img.transparent:hover {
    filter: alpha(opacity=50); /* internet explorer */
    opacity: 0.5;           /* fx, safari, opera, chrome */
}

Answer 2

Web 开发人员实现透明效果的典型方式是使用部分透明的 PNG 文件作为背景。

div {
  background: #FFF url(img/bg.png) repeat top left;
}

使用 png 将按预期工作，但是 opacity 不能按预期工作：

div {
  filter: alpha(opacity=50); /* IE */
  -moz-opacity: 0.5; /* Firefox */
  -webkit-opacity: 0.5; /* Older Safari, Webkit */
  opacity: 0.5; /* CSS Standard - Always last in the list */
}

这将使 DIV 50% 透明，包括其所有子项、文本和所有内容。您确实需要使用不透明度设置来确保获得预期的结果。

Answer 3

一个更简单的解决方法是，如果您可以忍受 IE6 稍差的用户体验，则对所有现代浏览器使用 alpha 透明图像，并将不透明（或只有一种颜色）的图像发送到 IE6。对于那些少数用户来说看起来有点糟糕，但要维护的代码要少得多。