8

htmlで背景画像だけを全体的にぼかすにはどうすればいいのでしょうか?
filterのblurを使うことはわかるのですが、下のcssのようにbodyの中に
filter: blur(5px);と書くと、body内のすべての要素にblurがかかってしまいます。
背景画像だけにblurをしたいのですがどうすればいいのでしょうか?


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div id="div1" style="width: 400px; height=800px">DIV1</div>
    </body>
</html>

body {
    background-image: url('background.jpg');
    background-attachment: fixed;
    filter: blur(5px);
}

1 件の回答 1

9

How to apply a CSS 3 blur filter to a background image

によると body:before のほうに background-imagefilter を加えて content: "" を設定するという方法が提案されています。具体例は こちら を参照してください。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。