memocarilog

要素の背景のみを透過したい場合は background-color に rgba() で背景色と透明度を指定しますが、いつものことながら IE8 は rgba() の色指定に対応していません…。そこで、IE8 にも対応したクロスブラウザで背景色の透明度を指定する方法をご紹介します。

IE8でも背景のみを透過するサンプルとそのコード

背景に透明度0.4の黒を指定したdivと、全く透明でない黒背景のdivを比較の為におきました。上の div は IE でも背景のみ透過されて表示されます。（CodePen のインラインフレームだと IE8 では正常に表示されないようです…）

See the Pen ie8でも背景を透明にする by Saomocari (@Saomocari) on CodePen.

このサンプルでは、背景を透明にしたい要素に対し以下のように指定しています。

div{
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); 
	background: rgba(0, 0, 0, 0.4);
}
div:not(:target){
    filter: none;
}

コードの説明

2行目は IE8 への対応を行っています。本来はグラデーションを表示するためのプロパティですが、透明度を指定することができるため、グラデーションの開始と終了を同じ値にし単一色にした上で、透明度を指定し「背景のみ透明」という状態を作ります。

色と透明度の指定が少しややこしいですが、DXImageTransform.Microsoft.gradient() のカッコ内に入っている部分で指定していきます。

startColorstr がグラデーションの始まりの色、endColorstr がグラデーションの終わりの色となります。#と8桁の値で色と透明度の指定をします。

最初の2桁で透明度に対応する値 (透明00〜FF不透明)を指定し、あとの6桁で16進数での色を指定します。透明度の値は以下の表をご参照下さい。

透度	0%	10%	20%	30%	40%	50%	60%	70%	80%	90%	100%
値	00	1A	33	4D	66	80	99	B3	CC	E6	FF

サンプルの記述では、透明度40％のブラックと指定していることが分かります。

3行目の rgba(); の指定は、RGB値で色の指定と透明度を指定したものになります。この値に対応しているブラウザはこの指定を反映します。

ただ、ひとつ問題なのが IE9 が両方の記述に対応している点です。これだけの指定だと IE9 で見た場合2つの指定が反映されて思い通りの透明度になりません。

そこで、5行目〜の記述で iE9 へ向け、filter: none; を指定し filter での指定を打ち消します。

:not(:target) という書き方は、IE9+ とその他のモダンブラウザ向けのハックですが、filter に対応しているのは IE のみなので、IE9 へ向けた指定となります。

ハックを使いたくない場合は、以下のようにコンディショナルコメントで記述したり、Modernizr などを使ったりしてもよいですね。

<!--[if IE9]>
<style>
	div:not(:target){
 	   filter: none;
	}		
</style>
<![endif]-->