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

这种情况正在发生，因为您已将这些模糊样式应用于<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>

Answer 2

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

背景图片应位于绝对定位的div中，该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 3

这是一个有效的例子：

<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>

整页响应背景图像与模糊效果

3 个答案: