具有模糊效果的整页响应式背景图片

Question

我正在尝试将图像用作具有模糊效果的响应式整页。这是我的 css-

    body {
    padding: 0;
    margin: 0;
    color: #000;

    background-image: url(images/home-page-bg.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #464646;

    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

但是模糊效果不适用于背景图像，而是整个内容都变得模糊。

有什么帮助吗？

Answer 1

要完成这项工作，您应该执行以下操作：

背景图片应绝对定位 div，这将在您的内容后面。然后你可以模糊整个 div 并且只有图像会被模糊（因为它将是 div 中唯一的内容）

用您的内容覆盖背景图片 div 包装。

 #background-div{
 padding: 0;
 margin: 0;
 color: #000;

 position:absolute; 
 top:0; height:100%; width:100%;
 left:0;
 z-index:1;

 background-image: url(images/home-page-bg.jpg);
 background-position: center center;
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-size: cover;
 background-color: #464646;

 -webkit-filter: blur(5px);
 -moz-filter: blur(5px);
 -o-filter: blur(5px);
 -ms-filter: blur(5px);
 filter: blur(5px);

}

Answer 2

这是一个工作示例：

<html>
<head>
    <style>
        .back:before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: -1;
            background-image: url(images/home-page-bg.jpg);
            background-position: bottom;
            background-repeat: no-repeat;
            background-size: cover;
            background-attachment: fixed;  
            height: 100%;
            filter: blur(5px);
            -webkit-filter: blur(5px);
            -moz-filter: blur(5px);
            -o-filter: blur(5px);
            -ms-filter: blur(5px);
        }
    </style>
</head>
<body>
    <div class="back">
        <p>Lorem ipsum</p>
    </div>
</body>

Answer 3

发生这种情况是因为您已将这些模糊样式应用到 <body> 标记。尝试这样的事情：

.background-image:before {
   content: "";
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: -1;
   top:0;
   background-image: url('http://webneel.com/wallpaper/sites/default/files/images/04-2013/tropical-beach-wallpaper.jpg');
   background-position: bottom;
   background-repeat: no-repeat;
   background-size: cover;
   background-attachment: fixed;  
   height: 100%;
   filter: blur(5px);
   -webkit-filter: blur(5px);
      -moz-filter: blur(5px);
        -o-filter: blur(5px);
       -ms-filter: blur(5px);
}

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>

<body>
<div class="background-image">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
</body>
</html>

具有模糊效果的整页响应式背景图片

Full page responsive background image with blur effect

css

blur