xray

書式

blur

対象

div, span, body, button, img, input, textarea, marquee, table, thead, tdtfoot, th, tr要素

継承

-

初期値

-

バージョン

独自プロパティ

対応ブラウザ

Win IE4.0以降

解説

X線効果のフィルタ効果を指定します。タグによってはposition:absoluteで絶対座標を指定する必要があります。以下のパラメータが指定できます。

●blur
設定名方法
enabled フィルタ効果スイッチ (0:オフ、1:オン)
add 0:元イメージを合成する、1:元イメージを合成しない
direction 角度。0, 45, 90, 135, ...の45度単位

●progid:DXImageTransform.Microsoft.Blur
設定名 方法
enabled フィルタ効果スイッチ (0:オフ、1:オン)
MaskShadow マスク(?)
PixelRadius ぼかし幅
ShadowOpacity 影の不透明度。0〜100。

Internet Explorer 4, 5.0と5.5以降でのDirect Xを利用した場合ではフィルタの指定方法が異なります。また、フィルタの表示結果が異なるので注意が必要です。
バージョン 指定方法
IE4.0〜5.0 filter:blur()
IE5.5〜 filter:progid:DXImageTransform.Microsoft.Blur()
サンプルコード
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<style type="text/css"><!--
body { margin:0px;
background-image:url(bg.gif);
}
div {
filter:blur(add=true,strength=5);
position:absolute;
top:0px;
left:0px;
width:320px;
height:64px;
background-color:white;
}
--></style>
</head>
<body>
<div>
 ここのブロックがInternet Explorer独自のフィルタが適用されている部分になります。<br>
<img src="rainbow.gif">
</div>
</body>
</html>
実際のサンプルを実行する