如何在背景速记中实现CSS模糊？

Question

目标是模糊背景，而不模糊上面的所有其他元素。

对于背景和内容使用单独的div并依赖z-索引的方法对我来说有点不灵活，所以我想知道是否有可能在背景简写的语法中实现CSS模糊过滤器(因为“背景过滤器:模糊(5px)”不是有效的CSS)，这将只应用于背景。

特斯拉用速记法做得很好，但是他们使用了一个透明/黑色的梯度，而我想使用模糊。下面是一些我尝试过的基于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;
}

我不确定这里的模糊语法是不正确的/它需要有不同的缩写，或者这是一个完全错误的方式。有可能像这样用速记来模糊吗？

Answer 1

问题是blur不是background属性的值，而是filter的值。根据Mozilla

背景 CSS属性是在样式表中单个位置设置单个背景值的简写。背景可用于设置一个或多个of：、和的值。

特斯拉可以使用background-gradient，因为background-image属性能有作为它的值：

# where =无 where =image where

AC.26 image<交叉淡出()>image

要完成您想要的，需要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 (视图宽度)和vh (视图高度)来强制background-image div的宽度和高度，但是您可以使用%。