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

【问题标题】：how to blur the background image only in css [duplicate]如何仅在css中模糊背景图像[重复]
【发布时间】：2016-11-16 22:05:20
【问题描述】：

您好，我正在尝试模糊背景图像，但我认为它缺乏这样做。任何对它的帮助都会增强我的能量。谢谢

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

谢谢。

【问题讨论】：

@TanmoySarkar 检查上面评论中的链接，并告诉我们他们的解决方案是否适合您的需求。
@RDardelet 我正在尝试通过该链接解决此问题.. 让我们看看。

标签： html css

【解决方案1】：

如果您对<html> 应用模糊，那么它会模糊您的网页。

您需要在<body> 中创建另一个<div>，而不是为<html> 添加背景，其大小与网页相同，并为其添加模糊。

示例

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>

【讨论】：

@tympazz 非常感谢，这太棒了...这解决了我的疑问，谢谢。

【解决方案2】：

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

例如：

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

【讨论】：

谢谢大家的热心帮助..这也解决了我的疑问和疑问..谢谢@everyone .:)