IE8とIE9できれいに透過を適応させるCSS

サンプルソース
このような写真の一覧を作成して、タイトル部分を透過にしたい場合、

opacityプロパティか、background-color: rgba();の透明度を利用する方法などがあります。

しかし、opacityrgba()は、chromeやfirefox等のブラウザは対応しておりますが、両方共にIE8以下の対応ができておりません。

IE8も対応させる案件では、画像で対応するでも良いですが、できたらCSSで適応させたいです。

IE8とIE9にも透過を対応させる方法

まずIEに対応させるには、filterを利用します。

filter は、Microsoftが作った、フィルタ効果を指定するプロパティです。

これでIEも適応完了!というわけにはいきません。

IE8は適応できていますが、IE9に関しては、透過の部分がかなり濃くなっているのがわかります。
ie8_ie9
これはIE9に

両方のプロパティがかかってしまっている為です。

なので、IE9ではfilterがかからないようにする必要があります。
:not(:target)のターゲット疑似クラスは、IE9だけに適応さるハックなので、これを利用してfilterをnoneに上書きしておきます。

できあがったソースは、

カテゴリ一覧