不透明度轉換不工作在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