HOME > Tips > CSS > Internet Explorer 6で背景を半透明にする

Internet Explorer 6で背景を半透明にする

  • Author:920
「 IE6で背景を半透明にする」のスクリーンショット

スクリーンショット

上記のように写真などのイメージの上にテキストを配置したいことがあります。

そのような場合、テキストの読みやすさ考えて、イメージの上に半透明のスクリーンのような効果を加えることがあります。

しかし、イメージを直接加工しようとした場合、イメージを変更するたびに同様の加工が必要になります。

そこで、イメージの上にボックスを配置し背景イメージに半透明のPNGイメージイメージを指定すれば、同様の効果が得られますが、IE7未満では、半透明のPNGイメージが使用できません。

しかし、IEには、IE独自に拡張したCSSプロパティ、「filter: Alpha()」CSSがあります。これを利用すると背景色を透過させることができます。

<不透明度70%の場合>

  1. selector {
  2.      filter: Alpha(opacity=70);
  3. }

詳細はサンプルのソースを参照してください。

<サンプル>
UP