■Maskフィルタとは･･･オブジェクトの色のある不透明部分を透明にし、下の背景が透けて見えるようにする。逆に透明部分を指定色で塗りつぶし不透明にする。
style書式･･･< ="filter:mask(color=c)">
Script書式･･･コンテナのID.style.filter = "mask(color=c,enabled=n)";
c ･･･透明部分を塗りつぶす色を16進数RGB形式か色名で指定。
n ･･･true,1(デフォルト、フィルタを有効にする)／false,0（無効にする)、このオプションは通常は省略する
●左はMaskをかけていない。右は文字列に青色のMaskをかける。その結果、文字は透明になり下色の黄色が見える。、透明な部分(文字以外の部分)は青色で塗りつぶされた。
MaskFilter
MaskFilter
●画像の上に文字を乗せ、文字に＜filter:Mask(Color='white')＞をかける(右の例）。
色を変更
MASK
MASK
Sample Source......................................................................>>>
<div STYLE="position:absolute;top:90;left:100;width:130;
height:100;background-color:yellow;z-index:1">
</div>
<p><span STYLE="position:absolute;top:120;left:50;width:300;
font-size:26pt;filter:mask(color=blue);z-index:2">
青色にマスキング</span>
</p>
<p>色を変更
<span onclick="sp.style.filter='mask(color=#000000)';">［黒色に］</span>
<span onclick="sp.style.filter='mask(color=#0b6eff)';">［青色に］</span>
<span onclick="sp.style.filter='mask(color=#ffffff)';">
［白色に戻す］</span>
</p>
<div style="position:absolute;top:270;left:50; //下敷きになる画像
width:420;height:75;background-image:
url(../../soft/imgcpb1/backj06.jpg);">
</div>
<p><span id="sp" style="position:absolute;top:270;left:50;
width:420;height:75;font:900 60pt Arial;
filter:Mask(Color='white');">KODAYAN</span>
</p>
end(最終更新:12/11/10)