Question

我已经设置了一个非常简单的HTML页面，其中包含与之关联的CSS代码：

html {
    background: url("photourl") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

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

然而，它并不模糊。我已经看过this示例并尝试使用div标记，但我不太明白这里的推理。为什么我发布的代码不起作用？

Answer 1

您需要使用body来激活过滤器（也在Firefox中），并将背景设置为HTML，以便它被身体绘制，这是一个标记，用于保存文档的所有可见内容。

当您将背景设置为正文或HTML时，默认会将其绘制为HTML，并且在大多数浏览器中都不会激活过滤器。 运行下面的代码段并将其悬停以取消设置html背景并查看发生。

如果你测试空文档，你还需要设置一个高度到body，否则它没有。

https://www.w3.org/TR/css3-background/#special-backgrounds

body {
  background: url("http://dummyimage.com/640x480") no-repeat center center fixed;
  background-size: cover;
  min-height: 100vh;
  -webkit-filter: blur(5px);
     -moz-filter: blur(5px);
       -o-filter: blur(5px);
          filter: blur(5px);
}
html {
  background: white;
}
/* see what happens when bg is not set also on HTML */
html:hover { 
  background:none;
}

Answer 2

<!DOCTYPE html>
<html>
<head>
    <title>Stack </title>
    <style>
    div {
        height:500px;
        width: 100%;
    background: url("https://udemy-images.udemy.com/course/750x422/394968_538b_5.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}
    </style>
</head>
<body>
<div>

</div>
Some Text
</body>
</html>

我试过这个并且工作正常。

无法模糊CSS背景

2 个答案: