css - 半透明の IE 回避策

Question

IE9 より前の CSS で次の CSS を表示するには、どのような回避策が必要ですか。

background-color: hsla(182, 44%,76%,.5);

Answer 1

透明要素の場合は、より多くの方法があります。

IE の場合 ->

filter: alpha(opacity=40);  
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);  
/* above line works in IE6, IE7, and IE8 */  
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)";  
/* above line is IE8 only */ 

すべてのブラウザの場合:

opacity: .7;  

ただし、それらはすべての要素を透明にします。背景などの任意の色のみを透明にする必要がある場合は、2 つの関数rgba またはhslaそれらの例を使用する必要があります。

サポート : (Firefox 3 以降、Opera 10.1 以降、Chrome 2 以降、Safari 3.1 以降)

#rgba {  
    background: rgba(98, 135, 167, .4);  
}  

ただし、IE9はIEのすべてのバージョンでのみサポートし、すべてのブラウザーはcss3をサポートします

#hsla {  
    background: hsla(207, 38%, 47%, .4);  
}  

Answer 2

これを行うには、Microsoft 独自の「フィルター」のいずれかを使用できます。

background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FA7DBDD,endColorstr=#7FA7DBDD); 
zoom: 1;

16 進値は ARGB 順です。したがって、色を RGB Hex 値に変換し (#A7DBDDこの場合)、不透明度を前に置きます (0.5 は 16 進数で 7F です)。#7FA7DBDD

もちろん、条件付きコメントを使用して、IE 固有のスタイルシート内で行うのが最適です。

Answer 3

単色の別のdom要素を使用し、不透明度を設定します...うまく機能します:)

.bg { 背景: #000; フィルター: アルファ (不透明度 = 50); 不透明度: 0.5; }