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

【问题标题】：Change alpha for an image hover in CSS2 standard?在 CSS2 标准中更改图像悬停的 alpha？
【发布时间】：2010-11-13 12:29:29
【问题描述】：

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

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

【问题讨论】：

标签： css image alpha

【解决方案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 */
}

【讨论】：

关于PNG和IE6的建议真的只有在处理PNG-24文件时才需要——IE6支持透明的PNG-8文件就好了。
顺便说一下，不透明度：0.5；在 IE8 中工作，您不需要 -ms-filter 样式 - 浏览器模式：IE8，文档模式：IE8 标准。
我知道我可以使用过滤器和不透明度，但它们仅适用于 css3。我仍在尝试使用 css2，因为我想让它为 w3c 验证

【解决方案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% 透明，包括其所有子项、文本和所有内容。您确实需要调整不透明度设置，以确保获得预期的结果。

【讨论】：

【解决方案3】：

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

【讨论】：