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

如果您将模糊应用于<html>，则会模糊您的网页。

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

示例

＆＃13;
＆＃13;
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; }
＆＃13;
<h1> This is a title </h1> <div class="page-bg"> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

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

例如：

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

要么模糊到图像容器，要么直接像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);
}

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

2 个答案: