目的是使背景模糊而不使背景上方的所有其他元素模糊。
对我来说，使用单独的div作为背景和内容并依赖z-index的方法对我来说有点不灵活，因此我想知道是否可以在背景速记语法中实现CSS模糊过滤器（因为“ background-filter ：blur（5px）“是无效的CSS），只会将其应用于背景。
Tesla用速记符号做得很好，但是他们使用了透明/黑色渐变，而我想使用模糊。这是我尝试过的一些简化代码，这些代码基于Tesla登录页面：
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：
background CSS属性是用于在样式表中的单个位置设置各个背景值的简写。 background可用于设置以下一项或多项的值：
Tesla可以使用background-gradient，因为background-image属性can have是其值：
其中
其中
要完成您想要的操作，将需要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上方。
我已经使用CSS3 vw（view-width）和vh（view-height）来强制background-image div的宽度和高度，但是可以使用%代替。
关于html - 如何在背景速记中实现CSS模糊？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45603203/