カテゴリ: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
トラックバック
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