目标是模糊背景而不模糊其上方的所有其他元素。
事实证明，对背景和内容使用单独的div 并依赖 z 索引的方法对我来说有点不灵活，所以我想知道是否可以在背景速记语法中实现 CSS 模糊过滤器(因为"背景过滤器：blur(5px("不是有效的 CSS(，它只会将其应用于背景。
特斯拉在速记符号方面做得很好，但他们使用透明/黑色渐变，而我想使用模糊。以下是我尝试过的一些基于特斯拉登录页面的简化代码：
.HTML：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="the-CSS-Written-Below">
</head>
<body class="background-image">
<div style="background-color: yellow">
<p>Some text that shouldn't be blurred!</p>
</div>
</body>
</html>
.CSS：
.background-image{
background: radial-gradient(transparent, hsl(0, 0%, 2%)), gray url(http://leecamp.net/wp-content/uploads/kitten-3.jpg) no-repeat center center fixed;
}
这是一个JSFiddle，所以你可以看到它的样子。
然后，当我尝试将速记滤镜从径向渐变更改为模糊时，它停止工作：
.CSS：
.background-image{
background: blur(5px), gray url(http://leecamp.net/wp-content/uploads/kitten-3.jpg) no-repeat center center fixed;
}
我不确定这里的模糊语法是否正确/速记需要有所不同，或者这可能是完全错误的方式。甚至有可能像这样在速记中模糊吗？
问题是blur不是background属性的值，而是filter的值。 根据Mozilla的说法：
背景CSS 属性是在样式表中的单个位置设置各个背景值的简写。 background 可用于设置以下一项或多项的值：
<背景剪辑>、<背景颜色>、<背景图像>、<背景原点>、<背景位置>、<背景重复>、<背景大小>和<背景附件>。
特斯拉可以使用background-gradient，因为background-image属性可以具有以下值：
#
where= none | where = | <image((> | <image-set((> | <element((> | <cross-fade((> |
要完成您想要的，需要 2 个div，如下所示：
.background-image {
background: gray url(http://leecamp.net/wp-content/uploads/kitten-3.jpg) no-repeat center center fixed;
position: fixed;
top:0;
left:0;
width:100vw;
height:100vh;
z-index:0;
filter:blur(5px);
}<body>
<div class="background-image"></div>
<div style="background-color: yellow;position:relative;">
<p>Some text that shouldn't be blurred!</p>
</div>
</body>请注意，您必须向其他div 添加一个position:relative，以便它显示在背景图像div 上方。
我已经使用 CSS3vw(视图宽度(和vh(视图高度(来强制background-imagediv 的宽度和高度，但您可以使用%来代替。