IE6, IE7でもRGBaを使う

カテゴリ:CSSテクニック 2009年12月 9日 23:52

正確には RGBa っぽく表示させる、ですがw
IE6, IE7 は RGBa に対応していません。

ですが、IE の独自拡張である filter を使うと RGBa と同じことが実現可能です。
ただ注意点として、JavaScript オフで見ているユーザの場合は処理されなくなってしまうので、JS で制御するような LightBox などで表示したポップアップに対して使用しておくと問題なく使えると思います。

HTML ソース

CSS ソース

簡単に説明すると、filter のグラデーション機能の透明度を利用します。
上記サンプルの filter は本来グラデーションを指定するものなのですが、グラデーションの色にアルファ値を持った値を設定できるのです。

サンプルで言うと、#B4000000の部分ですね。数値は 16 新数の 8 桁で指定し、最初の 2 桁が透明度を表します。00 で透明、FF で不透明となります。

つまり、始まりと終わりの色と透明度を同じにしてしまえば、まるで RGBa のような振る舞いになる、というわけです。
ただ、filter は CPU に負荷をかけるので、あまり多用しないほうがいいかもしれません。
上でも書いたように、ちょっとしたポップアップなどに利用する程度にしておくといいと思います。

それから 1 点問題として、IE7 では filter を使った場合、clearType のフォント(メイリオとか)が細くなる(アンチエイリアスがなくなる)という問題があります。
そのあたりも考慮した上で使用してみてください。

この記事のカテゴリー一覧を見る⇒CSSテクニック

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/165