不透明度转换不工作在Firefox和IE浏览器（和其他？）

Question

对于我自己的网站，我向访客展示了几张照片。这些图片应该在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; 
} 

Answer 1

试试这个

.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; 
} 

Answer 2

无需定义-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