IE8とIE9できれいに透過を適応させるCSS
よく読まれている記事
このような写真の一覧を作成して、タイトル部分を透過にしたい場合、
opacityプロパティか、background-color: rgba();の透明度を利用する方法などがあります。
しかし、opacityとrgba()は、chromeやfirefox等のブラウザは対応しておりますが、両方共にIE8以下の対応ができておりません。
IE8も対応させる案件では、画像で対応するでも良いですが、できたらCSSで適応させたいです。
IE8とIE9にも透過を対応させる方法
まずIEに対応させるには、filterを利用します。
filter は、Microsoftが作った、フィルタ効果を指定するプロパティです。|
1 2 3 4 |
-ms-filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#77000000,EndColorStr=#77000000); /* IE 8以上用 */ filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#77000000,EndColorStr=#77000000)"; /* IE 7以下用 */ |
これでIEも適応完了！というわけにはいきません。
IE8は適応できていますが、IE9に関しては、透過の部分がかなり濃くなっているのがわかります。
これはIE9に
|
1 |
background-color: rgba(0,0,0,0.6); |
|
1 |
-ms-filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#77000000,EndColorStr=#77000000); /* IE 8以上用 */ |
の両方のプロパティがかかってしまっている為です。
なので、IE9ではfilterがかからないようにする必要があります。
:not(:target)のターゲット疑似クラスは、IE9だけに適応さるハックなので、これを利用してfilterをnoneに上書きしておきます。
|
1 2 3 4 5 6 |
.entryTtlBox:not(:target){ filter: none; -ms-filter: none; } |
できあがったソースは、
|
1 2 3 4 5 6 7 8 9 10 11 |
.entryTtlBox{ background-color: rgba(0,0,0,0.6); filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#77000000,EndColorStr=#77000000); -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#77000000,EndColorStr=#77000000)"; } .entryTtlBox:not(:target){ filter: none; -ms-filter: none; } |