如何仅在css中模糊背景图像

Question

如何仅在css中模糊背景图像

嗨,我想模糊背景图像,但我认为它缺乏这样做.对它的任何帮助都会增加我的能量.谢谢

这是我的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;

}

Run Code Online (Sandbox Code Playgroud)

我正在尝试应用此功能,但它模糊了我的所有网页仅包含背景图像.

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

Run Code Online (Sandbox Code Playgroud)

谢谢.

Answer 1

小智 15

如果您应用模糊,<html>则会模糊您的网页.

而不是添加背景<html>你需要创建另一个<div>与<body>网页大小相同的内容,并为其添加模糊.

例

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

Run Code Online (Sandbox Code Playgroud)

<h1>
This is a title
</h1>

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，4 月前
查看次数：	49709 次
最近记录：	8 年，7 月前