Home > CSS > [CSS]透過PNG画像をIE６で適用させる

[CSS]透過PNG画像をIE６で適用させる

2009-02-17 (火) 18:14
CSS
CSS | 画像 | 透過png

CSSの指定だけで透過PNG画像をIE６で適用できる情報が、CSS TIPSさんで掲載されていたので引用メモ。

透過pngは便利な機能なのですが、IE6が対応していない為、通常のやり方では使用できません。

IE6とその他のモダンブラウザで透過pngを表示する方法は以下のようになります

記述するcssコード
div.alpha{
	width:100px;
	height:200px;
	background:url("alpha.png");
}
* html div.alpha{
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='alpha.png',sizingMethod='scale');
	background:none;
}
div.alphaの記述はすべてのブラウザに対して適応されます。

その後にスターハックを使用して透過pngをサポートしていないＩＥ６のみに適応するスタイルを記述します。（ＩＥの独自拡張フィルタを使用しています）

これでほぼすべてのモダンブラウザで透過pngを表示する事ができます。

実際のサンプルなどはCSS TIPSさんのページに掲載されてます。

またヨモツネットさんにも、CSS ファイルだけで IE 6 の背景に設定した png のアルファチャンネルを有効にするの記事ですごい詳しく書かれてあります。

実際にはまだ試してませんが、これでちゃんとできたらJSもｊQueryでの方法もいらなくていいですね。

■スタイルシート（CSS）の参考書です。CSS関連書籍一覧はこちら

速習Webテクニックスタイルシート上級レイアウト (Quick Master of Web Technique)

posted with amazlet at 09.02.21

河内正紀
技術評論社
売り上げランキング: 96586

おすすめ度の平均:

上級に進める１冊です。
一歩先へ進む為に
上級なのこれ
多くの実例とわかりやすい解説
良書

Amazon.co.jp で詳細を見る

その他のCSS関連書籍一覧はこちら

Popularity: 34% [?]

タグ: CSS, 画像, 透過png

Comments:0

Trackbacks:0

Trackback URL for this entry: http://www.web-milk.com/articles/css/css%e9%80%8f%e9%81%8epng%e7%94%bb%e5%83%8f%e3%82%92ie%ef%bc%96%e3%81%a7%e9%81%a9%e7%94%a8%e3%81%95%e3%81%9b%e3%82%8b.html/trackback
Listed below are links to weblogs that reference: [CSS]透過PNG画像をIE６で適用させる from Webmilk

Home > CSS > [CSS]透過PNG画像をIE６で適用させる