ホーム>HTMLリファレンス(アルファベット検索)>blur フィルタ
blur フィルタ …ブレさせる
使用プロパティ
|
filter: blur(属性=値); |
対象となる
要素 |
すべて |
継承 |
しない
|
値 |
次項(属性、値とその効果)を参照してください。 |
|
|
解説
blur フィルタを使えば、要素をブレさせることができます。
[ 複数の属性値を指定する ]…カンマ「,」で区切ります。 書式→「filter: フィルタ名(属性=値,属性=値);」
[ メモ ]
filter プロパティを div 要素や span 要素に使用する際には、width プロパティや height プロパティで要素の幅や高さを指定する必要があります。ですが、画像などのように幅や高さが決まっている要素には必要ありません。また、position プロパティで「absolute」を指定した要素に対しても必要ありません。
※ filter プロパティは Internet Explorer 独自のプロパティで、対応していないブラウザで表示すると表示が崩れる場合がありますので注意が必要です。
|
属性 |
値 |
効果 |
add
(アド) |
「true」または「1」は元の画像を重ねる
「false」または「0」は元の画像を重ねない |
元の画像を重ねて表示するか、重ねないで表示するかを指定できる |
direction
(ディレクション) |
時計回りの角度を0(真上)、45(右上)、90(右)、135(右下)、180(真下)、225(左下)、270(左)、315(左上)のいづれかを指定 |
ブレの方向 |
strength
(ストレングス) |
整数 |
ブレの長さ |
使用例
記述例
<html>
<head>
<title>HOME PAGE ZERO ガイド</title>
</head>
<!--ページの本文-->
<body>
<p>- 元の画像- <br>
<img src="logo.gif" width="172" height="60" alt="サンプル">
</p>
<p>-フィルタ使用後の画像-<br>
<div style="width: 100%; filter: blur(strength=20);">
<img src="logo.gif" width="172" height="60" alt="サンプル">
</div>
</p>
</body>
</html> |
|
[ブラウザでの表示例]
HOME PAGE ZERO ガイド |
- 元の画像-
-フィルタ使用後の画像-
|
△ページトップへ
ホームページ初心者ガイド|
HTML|
CSS|
ホームページお役立ち情報|
ホームページレベルアップ情報|
その他