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

---

属性：

rotation	回転角度を指定 　0：回転しない 　1：時計回りに90゜回転する 　2：時計回りに180゜回転する 　3：時計回りに270゜回転する
opacity	不透明度を0.00〜1.00の数値で指定
mirror	左右反転を指定 　0：左右反転しない 　1：左右反転する
invert	色彩反転を指定 　0：色を反転しない 　1：色を反転する
xray	白黒反転を指定 　0：白黒反転しない 　1：白黒反転する
grayscale	白黒にする 　0：白黒にしない 　1：白黒にする
mask	透明・不透明を反転させる 　0：反転させない 　1：反転させる
maskcolor	maskで反転させた後の色を指定
enabled	フィルタを設定するかどうかを指定 　0，false：フィルタを設定しない 　1，true ：フィルタを設定する

filterプロパティのBasicImageフィルタを使うと、1つのフィルタで、回転・不透明度・左右反転・色彩反転・レントゲン写真化・白黒写真化の7種類の効果を指定することが出来ます。
また、同時に複数の効果を組み合わせることも出来ます。

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



↑元の画像


↑不透明度(opacity=0.5)と左右反転を指定


↑元の画像


↑時計回りに90゜回転と色彩反転を指定

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

<STYLE type="text/css">
<!--
.case1 {
filter:progid:DXImageTransform.Microsoft.BasicImage(opacity=0.5,mirror=1);
}
.case2 {
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1,invert=1);
}
-->
</STYLE>

<IMG src="img/flw10_18_1.jpg" width="200" height="150" border="0"><BR>
↑元の画像<BR><BR>
<IMG src="img/flw10_18_1.jpg" width="200" height="150" border="0" class="case1"><BR>
↑不透明度(opacity=0.5)と左右反転を指定

<IMG src="img/flw10_18_2.jpg" width="200" height="150" border="0"><BR>
↑元の画像<BR><BR>
<IMG src="img/flw10_18_2.jpg" width="200" height="150" border="0" class="case2"><BR>
↑時計回りに90゜回転と色彩反転を指定