题
我试图增加对我的形象阿尔法效果。该图像是在圆角的矩形形状。我知道有属性来更改阿尔法在CSS3,但我想是符合W3C标准,这仍然是CSS2。
对不起,我没有正确ealier说明我的问题。我试图改变阿尔法当我将鼠标悬停在使用CSS2的图像。我正在考虑使用“背景图片”为100%的α,并使用img标签为50%的α。有没有更好的方式来做到这一点?
解决方案
如果图像是 PNG ,则可以包括直接阿尔法在图像中。当然,这将需要 PNG修正脚本IE6。
否则,您可以使用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 */
}
其他提示
一个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%透明,包括它的所有子,文本的和所有。你真的需要玩的不透明度设置,以确保你得到的结果如你所愿。
这是更简单的修复,如果你能忍受为IE6略差的用户体验,是使用Alpha透明图像的所有现代浏览器,并且没有透明(或只是一种颜色),以IE6发送图像。寻找那些少数用户有点差,但少了很多代码维护。
不隶属于 StackOverflow