Question

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

对不起，我没有正确地说出我的问题。当我使用CSS2将鼠标悬停在图像上时，我试图更改alpha。我正在考虑将“background-image”用于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发送没有透明度（或只是单色）的图像。对于那些少数用户来说看起来更糟糕，但维护的代码要少得多。

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

3 个答案: