12915


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

[code]

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

[code]

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


CC BY-SA 3.0
2015-08-01T07:54:47.970
12913
2015-08-01T14:36:50.943
5246
question
html css html5
htmlで背景画像だけを全体的にぼかす


[How to apply a CSS 3 blur filter to a background
image](https://stackoverflow.com/q/20039765/813612)

によると `body:before` のほうに `background-image` と `filter` を加えて `content: ""`
を設定するという方法が提案されています。具体例は [こちら](http://codepen.io/akademy/pen/FlkzB) を参照してください。


CC BY-SA 3.0
2015-08-01T08:11:42.953
12915
2015-08-01T14:36:50.943
2017-05-23T12:38:55.250
-1
208
12913
answer