问题：
CSS模糊技术仅用于背景[复制]
锺英卫
我想用css3过滤器模糊这个html代码的背景图像，请提供解释。
<!DOCTYPE html>
<html>
<head>
<title>Student-login</title>
<link href='http://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'>
<style>
body{
background-image: url("background.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
</style>
</head>
<body>
<div class="main-form">
<h1>Hello</h1>
</div>
</body>
</html>
但其中的内容不会变得模糊。
共有1个答案
张英范
你必须使用两种不同的容器，看看这里它会帮助你：
https://stackoverflow.com/a/20039965/4298050
类似资料：
-
问题内容： 我希望网站上的弹出窗口具有 Vista/7航空玻璃风格的效果，并且它必须是动态的。我很好这不是一个跨浏览器的效果，只要该网站仍然 _适用_于所有现代浏览器。 我的第一次尝试是使用类似 但是，正如我应该预期的那样， 这导致 对话框的 内容 模糊并且背景保持清晰。 有什么方法可以使用CSS来模糊半透明元素的背景而不是其内容？ 问题答案： 由于除FF以外，其他浏览器似乎未广泛支持该属性，因此
-
嗨，我正试图模糊背景图像，但我认为这样做是不够的。对它的任何帮助都会让我为之振奋。谢谢 这是我的CSS 我试图应用这个，但它模糊了我所有的网页安装的背景图像只。 非常感谢。
-
问题内容： 嗨，我正在尝试使背景图像模糊，但我认为这样做不够。对此的任何帮助都会增强我的精力。谢谢 这是我的CSS 我正在尝试应用此功能，但它只会模糊我所有插入背景图像的网页。 谢谢。 问题答案： 如果您要应用模糊处理，那么它将模糊您的网页。 而不是要添加背景，您需要创建另一个与同尺寸该网页，并添加模糊处理它。 例
-
我做了这个例子。 我试图模糊背景图像，但主要内容也模糊了（
-
我将模糊过滤器应用于包装器div的背景图像。出于某种原因，模糊过滤器也应用于包装器div中的img元素。
-
问题内容： 我正在尝试模糊背景图像，但主要内容也模糊了（） 如何在不模糊内容的情况下模糊背景？ 问题答案： 您可以像这样在模糊元素上方叠加一个元素