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

我想为我的图像添加alpha效果。图像呈圆角矩形形状。我知道有属性可以改变CSS3中的alpha，但我试图符合w3c标准，它仍然是CSS2。更改CSS2标准中图像悬停的alpha值？

对不起，我没有正确说明我的问题ealier。我试图改变alpha时，我悬停在图像使用CSS2。我正在考虑使用100％alpha的“背景图像”，并使用img标签作为50％alpha。有没有更好的方法来做到这一点？

2009-07-23 fei

如果图像是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 */ 
}

来源

2009-07-23 19:24:32 tj111

有关PNG和IE6的建议实际上只在处理PNG-24文件时才需要 - IE6支持PNG-8文件，透明度很好。 – 2009-07-23 19:41:40

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％的透明，包括其所有的孩子，文本和所有。您将需要充分利用不透明度设置来确保您按照预期获得结果。

来源

2009-07-23 19:51:09

更简单的修复方法是，如果您能忍受IE6的稍差的用户体验，则为所有现代浏览器使用透明图像，并向IE6发送不透明（或仅单色）图像。对于那些少数用户来说看起来有点恶化，但是要维护的代码少得多。

来源

2009-07-23 19:55:13

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

回答

相关问题