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

Question

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

抱歉，我没有提前正确地陈述我的问题。 当我将鼠标悬停在使用 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 将按您的预期工作，但不透明度不会按预期工作：

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。 对于那些少数用户来说，看起来有点糟糕，但需要维护的代码要少得多。