無料で使える情報探す「おぼえがき」

透過PNG画像をCSSだけでおこなう方法

以前までこのブログのヘッダー画像は CSS で以下のように呼び出してました。

div#header {
   background:url(images/head.png) no-repeat;
   padding:30px 20px 150px 20px;
   margin-top:30px;
   text-align:left;
}

実際に使っていた画像が右図。

IE7 や Firefox 、 Opera では違和感なく表示できるのですが、 IE6 ではヘッダー画像の部分があきらかに濃い色で表示されます。

前に殴り書きした記事、 IE6でpng画像が透過出来ない のように GIF にしてしまうという乱暴なやり方もあるのですが、あまりスマートとは言えません。

ポピュラーなのは javascript を使って透過画像を IE6 で使用できるようにする方法ですが、今回は CSS だけで出来るやり方を試してみました。

使った画像は右図のもの。

CSS は IE6 だけに効かせるスターハックで以下のように記述。

* html div#header {
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src="http://xxxxx.xxx/wordpress/wp-content/
themes/xxxxxx/images/head.png",sizingMethod="scale");
 background:none;
 width:1000px;
 height:200px;
}

※「xxxxx.xxx」 、「xxxxxx」 はサイトの URL と 「head.png」 があるフォルダ。
階層を間違えないのがキモ。

これは IE の filterプロパティ AlphaImageLoader　というフィルターを使いアルファチャンネルを有効にするという方法です。

CSS が Valid でなくなるなどの欠点もあるようですが、当ブログはそこをこだわっていないのでこの方法で十分。

今回参考にさせていただいたのは下記のサイト様。　ありがとうございます。m(_ _)m

投稿日:

04.05.09

カテゴリ:

サイト作成&運営

コメント・トラックバック:

0件