不能模糊CSS背景
不能模糊CSS背景
提问于 2016-05-19 18:15:32
我已经设置了一个非常简单的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);
}然而，它并没有模糊。我看了一下这示例，并尝试用div标记代替它，但我不太明白这里的推理。为什么我发布的代码不起作用？
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-05-19 18:51:31
您需要使用body来激活过滤器(也在Firefox中)，并将背景设置为HTML，因此body wich绘制的标记应该包含文档的所有可见内容。
当您将背景设置为body或HTML时，默认情况下它会被绘制到HTML中，并且大多数浏览器不会激活筛选器。运行下面的代码片段并将其悬停到未设置的HTML背景中，看看会发生什么。
如果您对空文档进行测试，还需要将一个高度设置为body，否则它没有。
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;
}
Stack Overflow用户
发布于 2016-05-19 18:26:14
<!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>我试过了，而且效果很好。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37331151
复制相关文章
相似问题
腾讯云开发者
