T
op
S
CRIPTS
AUTO
M
OBILES
D
OWNLOADS
L
INK
B
BS
A
BOUT
F
EEDBACK
αチャンネルを持ったPNG画像の透過
説明
GIF画像に変わる新しい画像規格としてPNGというのがあります。 この形式には各ピクセルに透明度(αチャンネル)を設定することができ、 画像を徐々に透明にするといったことができます。
しかし、αチャンネルに標準で対応しているのは現在ではMozilla(およびNetscape6)のみで、 IEでは透明部分にグレーが入った状態で表示されます。 しかしIE5.5では特別な方法を使うことでPNG画像のαチャンネルを有効にすることができます。
サンプル
AlphaImageLoader
IMGタグ
ソースコード
BODYに記述
<DIV STYLE="height:250px; width:50px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./alpha.png');" ></DIV>
解説・備考
MozillaではふつうにIMGタグで貼り付けただけで透過されます。
srcで張り込まれる画像は要素の背景にセットされます。
DIV、SPAN タグで使用する場合は position を absolute にするか、または width,height を指定すること。
画像のパスに空白文字が含まれるとなぜか画像が表示されません。
参考:
AlphaImageLoader フィルター
参考:
MSDN: AlphaImageLoader Filter
- [BACK] -
|
AUTO
M
OBILES
|
D
OWNLOADS
|
L
INK
|
B
BS
|
A
BOUT
|
F
EEDBACK
Copyright © 1999-2005 By よーすけ
mailto:<
web@@@write-off.cside.com
>