【Blur()】文字や画像をぼかす

filterプロパティのBlur()では、文字や画像といった要素をぼかす事ができます。

filter:blur()の書式で指定する場合はパラメーターや動作が異なり、画像に適用した場合は、にじませた(ブレさせた)ようになり、文字に対して適用した場合は、立体的な影が付いた文字になります。 書式の違いなどについてはfilterプロパティを参照下さい。

なおfilter:blur()の書式は、新しい書式のfilter:progid:DXImageTransform.Microsoft.MotionBlur()と同じ効果となります。

書式

  • filter:progid:DXImageTransform.Microsoft.Blur(★) ……… ぼかす(IE5.5以上)
  • filter: Blur(■) ……… ブレさせる(IE4以上)

★:PixelRadius=ぼかす量、MakeShadow=影表示、他下記参照
■:add=上書き、他下記参照

値(IE5.5以上)

MakeShadow=影表示
影として表示するかどうかを指定します。表示する場合は「1」または「true」、表示しない場合は「0」または「false」を指定。(初期値0)
PixelRadius=ぼかし量
ぼかす量を指定します。0~100の間で指定して下さい。(初期値2)
ShadowOpacity=ぼかし濃度
ぼかす濃度(影の透明度)を指定します。0.00~1.00の間で指定して下さい。またMakeShadowを表示する場合に有効となります。(初期値0.75)
enabled
フィルタを実行するか指定します。有効にする場合「1」または「true」、無効にする場合は「0」または「false」を指定。

値(IE4以上)

add=上書き
ブレさせた上に元の内容を上書きするかどうかを指定します。上書き表示する場合「true」、上書き表示しない場合は「false」を指定
direction=ブレ方向
ブレの方向を指定します。0で上、45で右上、90で右、135で右下、180で下、225で左下、270で左、315で左上となります。
strength=ブレの距離
ブレの距離(にじませる強さ)を数値で指定します。

使用した時の例

.sample2 img{
  filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=10);
}

/* ie4以上の書式 */
.sample3 img{
  filter: blur(strength=30);
  padding:10px;
}
<p>フィルタを適用していない画像<br />
  <img src="image.jpg" alt="" width="130" height="87">
</p>
<p class="sample2">sample1を適用した画像。Blur(PixelRadius=10)<br />
  <img src="image.jpg" alt="" width="130" height="87">
</p>
<p class="sample3">sample2を適用した画像。Blur(strength=30)<br />
  <img src="image.jpg" alt="" width="130" height="87">
</p>

ブラウザ上の表示例

フィルタを適用していない画像

sample2を適用した画像。Blur(PixelRadius=10)

sample3を適用した画像。Blur(strength=30)

※IE9以下で表示して下さい(IEの「開発者ツール」のブラウザモード選択を利用するとブラウザバージョンを切り替えて表示できます)

対応ブラウザなどのデータ

プロパティ 独自拡張プロパティ
対応ブラウザ Internet Explorer4~

関連情報