无法模糊 CSS 背景答案

【问题标题】：Can't blur CSS background无法模糊 CSS 背景
【发布时间】：2016-05-20 03:06:46
【问题描述】：

我已经设置了一个非常简单的 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 标记来代替，但我不太明白这里的原因。为什么我发布的代码不起作用？

【问题讨论】：

stackoverflow.com/questions/13168142/…

标签： css

【解决方案1】：

您需要使用 body 来激活过滤器（也在 Firefox 中）并将背景设置为 HTML，以便它由 body 绘制，该标签应该包含文档的所有可见内容。

当您将背景设置为正文或 HTML 时，默认情况下将其绘制为 HTML，并且在大多数浏览器中不会激活过滤器。运行下面的 sn-p 并将其悬停以取消设置 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;
}

【讨论】：

【解决方案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>

我试过了，效果很好。

【讨论】：