＜＜ 外人さんからお手紙ついた、shiroヤギさんたら・・・ | メイン | MTが重くなったら導入を！ ＞＞
2006年2月12日
winIEで透過pngを使う方法（メモ）
今ブログのデザイン作成中なんですが、どうしても透過pngを使いたくて、
winIEでの透過pngの使い方を探してました。
どうやらMicrosoft独自の「AlphaImageLoader」と言うのを使うと、
ブラウザがDirectX機能を使ってアルファチャンネルを持った画像が表示できるようです。
使い方は、CSS内の特定のセレクタに
filter: progid:DXImageTransform.
Microsoft.AlphaImageLoader(src='PNG画像名',sizingMethod=scale);
と書きます。
でも、これだけだとwinIE以外のブラウザで画像が表示されなくなるので、
今度はwinIE以外に読み込ませるためのセレクタを作る必要があります。
winIE以外のブラウザに読み込ませるためには、子孫セレクタを使うのがいいようです。
子孫セレクタは下のように書きます。
*>セレクタ名 { プロパティ: 値; }
子孫セレクタを使い、winIE以外のブラウザに対するスタイルを書きます。
これでwinIE、その他ブラウザでも透過pngを表示する事が出きるようになります。
しかし、まだ問題点があります。
AlphaImageLoaderを指定したセレクタの中に、aタグがあった場合、
winIEでは正しくリンクが貼られません。
そこで、少し強引なやり方ですがaタグに対してpositionを使い、正しい位置に表示させます。
position:relative;
top:0px;
left:0px;
で正しくリンクされるようになるはずです。
もしも複数のaタグがある場合はaタグにID属性を付けて、それぞれのIDに対し、
positionを指定する必要があります。
投稿者 shiro : 01:37 | カテゴリー：Web | コメント (0) | トラックバック (5)
トラックバック
このエントリーのトラックバックURL:
http://shiro.s57.xrea.com/cgi/mt/mt-tb.cgi/85
このリストは、次のエントリーを参照しています: winIEで透過pngを使う方法（メモ）:
» 半透明フィルタ Microsoft.AlphaImageLoader その１ from CODE-0
Webサイトにて半透明（アルファチャンネル保持）の画像を使用したいときは、PNG... [続きを読む]
トラックバック時刻: 2006年9月 1日 22:15
» 半透明フィルタ Microsoft.AlphaImageLoader その２ from CODE-0
前のエントリで話した続きです。 IEのフィルターを設定した<div>... [続きを読む]
トラックバック時刻: 2006年9月 1日 23:04
» 透過PNGをIE6以下のバージョンで綺麗に表示する方法 from デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記
IE7では、やっとこさ標準でサポートされた、透過PNGですが、まだまだIE6以下のバージョンを使ってるユーザーが多いっちゅうわけで、透過PNGを使わないデザイナ... [続きを読む]
トラックバック時刻: 2006年12月15日 14:54
» 透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる from デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記
この方法を使えば透過PNGをIE6以下のバージョンで綺麗に表示することができるので、デザインの幅もグッと広がることだと思うのですが。。。問題は。。。この方法では... [続きを読む]
トラックバック時刻: 2007年1月 3日 13:22
» CSSで背景に指定した透過PNGをIE6以下で表示する from レッツFC2ブログ！
先ほどは「透過PNGをIE6以下で表示する - <img>タグ使用」ということで紹介しましたが、これではCSSで背景画像を指定した場合はうまく表示... [続きを読む]
トラックバック時刻: 2008年2月 3日 22:34