Win IEで透過PNG画像を使う

カテゴリ:CSSテクニック 2006年6月30日 13:44

さてさて、透過 PNG 画像。使えるととても便利で、デザインの幅も広がります。
しかし、Win IE では透過機能が使えないという大問題がっ。
(またおまえか! とか思いますねw)
まぁ IE7 になればちゃんと表示されるようになるみたいですが。n

しかしながら、Win IE でもなんとか見れる方法があります。
それが今回の記事の主題です(*'-')

▼EntryMore▼

まず始めに透過 PNG 画像を用意します。(当たり前)
それを、背景として配置します。ただ、繰り返し処理ができないので、
ワンポイント的な画像がいいでしょう。
すみません、filter の設定を変えれば、"引き伸ばし"なら指定できます。

今回の大事な部分は 1 点。
IE に透過 PNG を正常に表示させる ActiveX の機能を使う、というところです。
問題のソースはこれ。n

てゆーか、こんな機能をわざわざ実装するなら、最初から表示できるようにすればいいのにw
IE 固有の filter 機能を使って、透過性のある画像を透過させよう、という filter です。
これを使えば、問題なくWin IE でも透過 PNG が使えます。
しかし、最初にも書きましたが、本来の背景画像では繰り返し処理が使えますが、
このやり方だと繰り返し処理ができません。
なので、幅と高さの決まった透明な背景や、徐々に消えていく写真を表示する、という
使い方しかできません。
上でも訂正していますが、filter の設定を変えれば、"引き伸ばし"なら指定できます。決まった高さや幅でなくても使うことが可能です。

ちなみにここで若干 CSSハック を使ってます。
いちおう説明を別に載せておきます。n

合わせて読むと役に立つかもなエントリー

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

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

トラックバックURL

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

トラックバック

透過PNGをIE6以下のバージョンで綺麗に表示する方法

IE7では、やっとこさ標準でサポートされた、透過PNGですが、まだまだIE6以下のバージョンを使ってるユーザーが多いっちゅうわけで、透過PNGを使わないデ...

byデザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記 2006年12月15日 14:55

透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる

この方法を使えば透過PNGをIE6以下のバージョンで綺麗に表示することができるので、デザインの幅もグッと広がることだと思うのですが。。。問題は。。。この方...

byデザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記 2007年1月 3日 13:22