跨瀏覽器不透明度的哪些CSS屬性今天推薦使用？

Question

我想知道什麼是建議現在每天在CSS中使用不透明度，這將適用於大部分的交叉和版本。

應該只有opacity和filter或者我還應該使用'-ms-filter'嗎？

謝謝。

Answer 1

.transparent { 
/* Required for IE 5, 6, 7 */ 
/* ...or something to trigger hasLayout, like zoom: 1; */ 
width: 100%; 

/* Theoretically for IE 8 & 9 (more valid) */ 
/* ...but not required as filter works too */ 
/* should come BEFORE filter */ 
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 

/* This works in IE 8 & 9 too */ 
/* ... but also 5, 6, 7 */ 
filter: alpha(opacity=50); 

/* Older than Firefox 0.9 */ 
-moz-opacity:0.5; 

/* Safari 1.x (pre WebKit!) */ 
-khtml-opacity: 0.5; 

/* Modern! 
/* Firefox 0.9+, Safari 2?, Chrome any? 
/* Opera 9+, IE 9+ */ 
opacity: 0.5; 
    } 

對於今天的用法。

.transparent { 
zoom: 1; 
filter: alpha(opacity=50); 
opacity: 0.5; 
} 

source

Answer 2

對於設置不透明度，通常最好使用rgba(red, green, blue, alpha)（與color,background或任何其他使用顏色值的屬性）。 opacity屬性影響所有後代（你只能通過opacity使事情更加透明，不可能讓事情比他們的祖先更不透明），而使用rgba（），alpha值不是累積的，所以你不會結束在突然需要更改DOM結構以撤消某些元素的透明度的情況下，您會遇到困難。