IEのpng画像の透過関係の話 - yomamaのdev日記 (from jemomo)

透過部分のあるpng画像

まず、枠が透明で直径80pxの赤丸png画像を作る。

これを背景色が黒のbodyに表示させてみる。

<html>
<head>
  <style type="text/css">
  <!-- 
  body {
    background-color:#000;
  }
  -->
  </style>
</head>
<body>
  <img src="maru.png" alt="maru"/>
</html>

IE7以上の場合

IE6以下の場合

透明部分に四角い白枠が付いちゃう

最近、職場の人に教えてもらった「Google Code Archive - Long-term storage for Google Code Project Hosting.」を使ってみる。
これはIE6以下のブラウザーのHTML、CSS処理をIE7以上のブラウザの挙動に合わせてくれるライブラリ。
「Google Code Archive - Long-term storage for Google Code Project Hosting.」を読み込ませて、「maru.png」を「maru-trans.png」に名前を変更するだけで

<html>
<head>
  <!-- ##### 「ie7-js」を指定 ##### -->
  <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
  <style type="text/css">
  <!-- 
  body {
    background-color:#000;
  }
  -->
  </style>
</head>
<body>
  <!-- ##### maru.pngをmaru-trans.pngに変更 ##### -->
  <img src="maru-trans.png" alt="maru">
</html>

IE6でもちゃんと透明部分が透明になってる

今度は、高さ幅が100pxで背景色が青のdiv要素の中央に背景画像として使ってみる

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
  <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
  <style type="text/css">
    <!-- 
    body {
      background-color:#000;
    }
    #maru {
      height: 100px;
      width: 100px;
      background: #06f url(maru-trans.png) center center no-repeat;
    }
    -->
  </style>
</head>
<body>
  <div id="maru"></div>
</html>

IE7以上の場合

IE6以下の場合

IE7以上の場合にはちゃんと中央だけど、IE6以下だとtop,leftになっちゃう。惜しい。
この件については本家のページでも書いてあります。

Unfortunately, the transparent background image cannot be tiled (repeated) using background-repeat. Nor can it be positioned using background-position.

でも、ie7-js素晴らしい。

画像の透過

さっきの画像をopacityで透過してみる。

<html>
<head>
  <style type="text/css">
  <!-- 
  body {
    background-color:#000;
  }
  #maru{
    opacity:0.5;
  }
  -->
  </style>
</head>
<body>
  <img src="maru.png" alt="maru" id="maru"/>
</html>

Opera9、firefox3の場合

ちゃんと赤丸が透過できてる。

IE7の場合

透過しない？
IEはopacityじゃなくてfilterだった。。。cssを修正。

#maru{
  opacity:0.5;
  filter: alpha(opacity=50);
}

IE7で透過成功

IE6の場合

なんか枠まで透過されてる。

じゃ、さっきの「Google Code Archive - Long-term storage for Google Code Project Hosting.」も使ってみる。

  <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>

画像の名前も変更して。

  <img src="maru-trans.png" alt="maru" id="maru"/>

IE6でも

いい感じ。