对于我自己的网站,我向访问者展示了几张照片。这些图片应该在opacity: 0.7;
上,然后当使用transition: opacity 0.50s ease-in-out;
将鼠标悬停在它们上时,图像应该达到 100% 的可见性。本段下的代码显示了我如何让它适用于 Chrome。但即使它在Chrome中工作,它也不适用于Firefox和Internet Explorer等浏览器。你能帮我找出代码的哪一部分是错误的吗?我已经添加了我能想到的所有跨浏览器不透明度支持!
.image.full2 {
display: block;
width: 100%;
-moz-opacity: 0.7;
-webkit-opacity: 0.7;
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
-khtml-opacity: 0.7;
-moz-transition: opacity 0.50s ease-in-out;
-webkit-transition: opacity 0.50s ease-in-out;
-o-transition: opacity 0.50s ease-in-out;
-ms-transition: opacity 0.50s ease-in-out;
transition: opacity 0.50s ease-in-out;
}
.image.full2:hover {
-webkit-opacity: 1.0;
-moz-opacity: 1.0;
opactiy: 1.0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-khtml-opacity: 1.0;
}
定义-webkit-
或-moz-
,因为几乎新的浏览器都支持opacity
属性。 但是关于IE8或更早版本,您应该使用filter:alpha(opacity= x );
x应该是0到100%。 也许它可以帮助你... :)
.image.full2 {
display: block;
width: 100%;
opacity:0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */
-moz-transition: opacity 0.50s ease-in-out;
-webkit-transition: opacity 0.50s ease-in-out;
-o-transition: opacity 0.50s ease-in-out;
-ms-transition: opacity 0.50s ease-in-out;
transition: opacity 0.50s ease-in-out;
}
.image.full2:hover {
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
演示:http://jsfiddle.net/DcSnZ/1/
来源: http://www.w3schools.com/css/css_image_transparency.asp
试试这个
.image.full2 {
display: block;
width: 100%;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
.image.full2:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}