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

【问题标题】：How to implement a CSS blur within background shorthand?如何在背景速记中实现 CSS 模糊？
【发布时间】：2018-01-18 01:59:03
【问题描述】：

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

背景和内容使用单独的div并依赖z-indexes的方法对我来说已经证明有点不灵活，所以我想知道是否可以在后台实现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;
}

我不确定这里的模糊语法是否不正确/它需要不同的速记方式，或者这可能是完全错误的处理方式。甚至可以像这样简写模糊吗？

【问题讨论】：

标签： html css background blur shorthand

【解决方案1】：

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

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

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>

请注意，您必须将 position:relative 添加到您的其他 div 以便它显示在 background-image div 上方。

我已使用 CSS3 vw（视图宽度）和 vh（视图高度）来强制设置 background-image div 的宽度和高度，但您可以改用 %。

【讨论】：

我担心会是这种情况......但这如何解释径向梯度（过滤器的属性，对吗？）以简写符号工作（参见原始帖子中的小提琴)?
没错，它可以与radial-gradient 一起使用，但这仅仅是因为这是 background-image 属性的有效值。我不确定这对你是否有意义？我将编辑我的答案以使其更清楚。
是的，我现在明白了。不幸的是，模糊不属于该类别。但是，我们使用我们所拥有的。谢谢！
我已经更新了我的答案，希望能更清楚。是的，我同意：background-blur 甚至更好的 background-filter 将是对 background-* 属性的一个非常好的补充。