HOME > Tips > CSS > Internet explorer 6で透明PNG画像を使う

Internet explorer 6で透明PNG画像を使う

  • Author:920

Internet explorerの7未満では、透明PNG画像が使用できません。(透明にならない)

しかし、Internet explorerのCSS拡張の「filter」を使用することにより、透明PNGが使用できるようになります。

サンプル

<(X)HTML Code>

  • <div id="alpha">
  •      <img src="img/xyz.png" width="x" height="y" alt="透明PNG" />
  • </div>

<CSS Code>

  • div#alpha {
  •      width: xpx;
  •      height: ypx;
  • }

<CSS Code(Less than ie 7.0)>

  • div#alpha {
  •      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=img/xyz.png);
  • }
  • div#alpha img {
  •      display: none;     /* or visibility: hidden;*/
  • }
  •   
  • /* 指定するイメージは、(X)HTMLからのパスで指定します */

IE7未満以外のブラウザでは、<div id="alpha">の中に「img」タグで配置した「xyz.png」を表示します。

IE7未満のブラウザでは、<div id="alpha">の中に「img」タグで配置した「xyz.png」を「display」プロパティー、「none」で非表示にして、外側のボックスの背景イメージとして「xyz.png」を表示します。(「visibility」プロパティ、「hidden」でも可)

<div id="alpha">には、「xyz.png」のサイズを指定します。

UP