透過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 のアルファチャンネルを有効にするの記事ですごい詳しく書かれてあります。

…続きを読む >>

Popularity: 34% [?]

通常、IE6以下では透過PNGは使えなくて、透明度を設定した部分はグレーで表示されてしまう。IE独自のフィルター機能は意外とめんどー。そこで、IE6で透過PNGを使えるようになるにｊQueryのライブラリがあります。
ｊQueryを使ってる時は導入しやすいですね。
下記２つは名前ほぼ同じだけど、違う種類みたいです。

• jquery.pngfix.js（要jquery.js）
• jquery.pngFix.js（要jquery.js）

…続きを読む >>

Popularity: 100% [?]

通常、IE6以下では透過PNGは使えなくて、透明度を設定した部分はグレーで表示されてしまう。IE独自のフィルター機能は意外とめんどー。
そこで、IE6で透過PNGを使えるようになるにJavascriptのライブラリがあります。

• iepngfix.js
• alphafilter.js
• Unit PNG Fix

内容は以下です。

…続きを読む >>

Popularity: 76% [?]