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

Question

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

对背景和内容使用单独的 div 并依赖于 z-indexes 的方法对我来说有点不灵活，所以我想知道是否可以在background shorthand 语法（因为 "background-filter: blur(5px)" 无效 CSS），它只会应用于背景。

Tesla 用 shorthand 符号做得很好，但他们使用了 transparent/black 渐变，而我想使用模糊。这是我尝试过的一些基于 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所以你可以看看它的样子。

然后当我尝试将 shorthand 过滤器从径向渐变更改为模糊时，它停止工作：

CSS:

.background-image{
    background: blur(5px), gray url(http://leecamp.net/wp-content/uploads/kitten-3.jpg) no-repeat center center fixed;
}

我不确定这里的模糊语法是否 right/it 需要与 shorthand 不同，或者这可能是完全错误的处理方式。甚至可以像这样在 shorthand 中模糊吗？

Answer 1

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

The background CSS property is a shorthand for setting the individual background values in a single place in the style sheet. background can be used to set the values for one or more of: <background-clip>, <background-color>, <background-image>, <background-origin>, <background-position>, <background-repeat>, <background-size>, and <background-attachment>.

Tesla 可以使用 background-gradient 因为 background-image 属性 can have 因为它的值是：

<bg-image>#
where <bg-image> = none | <image>
where <image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>

要完成你想要的，需要 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，以便它显示在背景图像上方 div。

我已经使用 CSS3 vw (view-width) 和 vh (view-height) 强制 background-image div，但您可以改用 %。

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

How to implement a CSS blur within background shorthand?

html

css

background

blur

shorthand