如何使用css模糊身体的背景色？[副本]
我已经将背景色设置为线性渐变，我希望背景色是模糊的。我尝试了一些代码，但无法使其工作。这是我的密码：
body{
background: linear-gradient(100deg, #3B53D6,#4AFAFA);
box-sizing: border-box;
margin: 0;
padding: 0;
height: 200px; /* Make sure the body is visible */
width: 200px;
}<body>
</body>我正在学习CSS，请帮助我！提前谢谢你！
共有3个答案
您可以将渐变设置为主体上的伪元素，并对其进行模糊处理：
body {
padding: 0;
margin: 0;
position: relative;
box-sizing: border-box;
min-height: 100vh;
}
body::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(100deg, #3B53D6, #4AFAFA);
filter: blur(5px);
z-index: -1;
}<body>
<div>
content content content
</div>
</body>
只需尝试添加filter： blur（8px）；，-webkit-filter： blur（8px）；。
代码：
body {
background: linear-gradient(100deg, #3B53D6,#4AFAFA);
box-sizing: border-box;
margin: 0;
padding: 0;
/* Add the blur effect */
filter: blur(8px);
-webkit-filter: blur(8px);
}
您可以通过将8px更改为任何您想要的数字来增加模糊。
例如，10px：
过滤器：模糊（10px）
，-网络工具包过滤器：模糊（10px）
。
在MDN中了解更多信息。
只需将背景与主体分开设置，即您可以使用伪元素并过滤此伪元素
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
position: relative;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(100deg, #3B53D6,#4AFAFA);
filter: blur(10px);
}-
问题内容： 我希望网站上的弹出窗口具有 Vista/7航空玻璃风格的效果，并且它必须是动态的。我很好这不是一个跨浏览器的效果，只要该网站仍然 _适用_于所有现代浏览器。 我的第一次尝试是使用类似 但是，正如我应该预期的那样， 这导致 对话框的 内容 模糊并且背景保持清晰。 有什么方法可以使用CSS来模糊半透明元素的背景而不是其内容？ 问题答案： 由于除FF以外，其他浏览器似乎未广泛支持该属性，因此
-
问题内容： 嗨，我正在尝试使背景图像模糊，但我认为这样做不够。对此的任何帮助都会增强我的精力。谢谢 这是我的CSS 我正在尝试应用此功能，但它只会模糊我所有插入背景图像的网页。 谢谢。 问题答案： 如果您要应用模糊处理，那么它将模糊您的网页。 而不是要添加背景，您需要创建另一个与同尺寸该网页，并添加模糊处理它。 例
-
我做了这个例子。 我试图模糊背景图像，但主要内容也模糊了（
-
我有一个表格，我用CSS模糊这个表格。 但它也模糊了我表格中的所有文本。 我正在使用的CSS： 有没有办法不模糊这个表格中的所有文字？ 目前看起来是这样的：
-
嗨，我正试图模糊背景图像，但我认为这样做是不够的。对它的任何帮助都会让我为之振奋。谢谢 这是我的CSS 我试图应用这个，但它模糊了我所有的网页安装的背景图像只。 非常感谢。
-
我想用css3过滤器模糊这个html代码的背景图像，请提供解释。 但其中的内容不会变得模糊。