如何仅在css中模糊背景图像[重复]

Question

嗨，我正试图模糊背景图像，但我认为这样做是不够的。对它的任何帮助都会让我为之振奋。谢谢

这是我的CSS

html {
  position: relative;
  min-height: 100%;
  max-width:  100%;
   background: url(img/rsz_1spring.jpg);
   background-repeat: no-repeat;
   -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
 max-width: 100%;
    overflow-x: hidden;

}

我试图应用这个，但它模糊了我所有的网页安装的背景图像只。

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

非常感谢。

Answer 1

将id或class属性指定给包含图像的图像标记或div，然后将css属性指定给特定的图像标记或包含图像的div。你正在模糊整个html，这显然会模糊整个网页。

对于eg：

<div class="image-container"><img class="blurred" src="..." /></div>

您可以模糊到图像容器或直接像或图像的div

.image-container, .blurred, .image-container>img {
   -webkit-filter: blur(5px);
   -moz-filter: blur(5px);
   -o-filter: blur(5px);
   -ms-filter: blur(5px);
   filter: blur(5px);
}

Answer 2

如果您正在应用模糊

而不是将背景添加到

实例

body {
  font-family: "Arial";
  color: #fff;
}

.page-bg {
  background: url('http://www.planwallpaper.com/static/images/general-night-golden-gate-bridge-hd-wallpapers-golden-gate-bridge-wallpaper.jpg');
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

<h1>
This is a title
</h1>

<div class="page-bg">
</div>