filter:progid:DXImageTransform.Microsoft.Alpha(属性)

---

属性：

opacity	開始地点の不透明度を0〜100の数値で指定
finishopacity	終了地点の　　　　　　　　〃
style	フィルタの種類を指定 　0：opacityの数値で一定に半透明にする 　1：線形にグラデーションのかかった半透明にする 　2：円形に　　　　　　　　　〃 　3：長方形に　　　　　　　　〃
startx	フィルタをかける開始地点のX座標を指定　(style=1のときに有効)
starty	フィルタをかける開始地点のY座標を指定　(style=1のときに有効)
finishx	フィルタをかける終了地点のX座標を指定　(style=1のときに有効)
finishy	フィルタをかける終了地点のY座標を指定　(style=1のときに有効)
enabled	フィルタを設定するかどうかを指定 　0，false：フィルタを設定しない 　1，true ：フィルタを設定する

filterプロパティのAlphaフィルタを使って、画像や文字の背景を半透明にします。
不透明度を変化させることが出来るのでグラデーションがかかったようにさせることもできます。

必要な属性は、半角のカンマ「,」で区切って指定します。
DIV要素やSPAN要素に適用させる場合は、positionプロパティに「absolute」を指定するか、widthやheightプロパティを使って表示位置を指定する必要があります。
この指定をしなければフィルタの効果は現れません。
また、このフィルタはInternetExplorer5.5以上のブラウザと、DirectXというWindowsの機能で表示できます。

- What's New - 2003/03/03 掲示板にこういったタイプのものがありますね。 TD要素の部分にフィルタを使っています。 写真素材:(c)<あんずいろapricot×color>

<STYLE type="text/css">
<!--
.case1 {
border:double 3px #ffcc66;
background-color:#ffffff;
filter:progid:DXImageTransform.Microsoft.Alpha
(style=0,opacity=60,enabled=1);
}
-->
</STYLE>

<TABLE width="100%" height="100%" cellpadding="0" cellspacing="0">
<TR>
<TD background="img/f42l.jpg" align="center">
<H3><FONT color="#339900">- What's New -</FONT></H3>
<TABLE cellpadding="10" cellspacing="0" width="80%">
<TR>
<TD class="case1">2003/03/03<BR>
掲示板にこういったタイプのものがありますね。<BR>
TD要素の部分にフィルタを使っています。</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>

見出しにも使えます

<STYLE type="text/css">
<!--
H4 {
background-color:#cc99cc;
padding:20px;
width:100%;
}
.case2 {
filter:progid:DXImageTransform.Microsoft.Alpha
(style=1,opacity=100,finishopacity=10,startx=0,starty=0,
finishx=100,finishy=20,enabled=true);
}
-->
</STYLE>

<H4 class="case2">
<FONT color="#ffffff">見出しにも使えます</FONT>
</H4>

↑元の画像 ↑円形のフィルタをかけています

写真素材:(c)素材散策

<STYLE type="text/css">
<!--
.case3 {
filter:progid:DXImageTransform.Microsoft.Alpha
(style=2,opacity=100,finishopacity=0);
}
-->
</STYLE>

<IMG src="img/turip10_01_2.jpg" width="200" height="150" border="0"><BR>
↑元の画像<BR><BR>
<IMG src="img/turip10_01_2.jpg" width="200" height="150" border="0" class="case3"><BR>
↑円形のフィルタをかけています