不能模糊CSS背景

我已经建立了一个非常简单的HTML页面，与之相关联的这个CSS代码：不能模糊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标记代替它，但我不太明白这里的推理。为什么我发布的代码不工作？

来源

2016-05-19 Erik

http://stackoverflow.com/questions/13168142/is-it-possible-to-use-webkit-filter-blur-on -背景图 – sinisake

您需要使用body来激活过滤器（同样在Firefox中）并将背景设置为HTML，因此它是由body绘制的，这是假设用来保存文档的所有可见内容的标记。

当您将背景设置为body或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; 
 
}

来源

2016-05-19 18:51:31

-1

<!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>

我试过这个，它的工作正常。

来源

2016-05-19 18:26:14 bhansa

不能模糊CSS背景

回答

相关问题