Question

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

使用单独的div作为背景和内容并依赖z-index的方法对我来说已经证明有点不灵活，所以我想知道是否可以在后台实现CSS模糊过滤器简写< / strong>语法（因为“background-filter：blur（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

问题在于\s不是blur属性的值，而是background的值。根据{{3}}：

背景 CSS属性是在样式表中的单个位置设置各个背景值的简写。 background可用于设置以下一项或多项的值：＆lt; background-clip＆gt;，＆lt; background-color＆gt;，＆lt; background-image＆gt;，＆lt; background-origin＆gt;，＆lt; background-position＆gt;，＆lt ; background-repeat＆gt;，＆lt; background-size＆gt;和＆lt; background-attachment＆gt;。

特斯拉可以使用filter，因为background-gradient属性Mozilla的值为：

＆LT; BG-图像＆gt;＃
  其中＆lt; bg-image＆gt; =无| ＆lt;图像＆GT;
  其中＆lt; image＆gt; =＆lt; url＆gt; | ＆lt;图像（）＆GT; | ＆lt;图像集（）＆GT; | ＆LT;元件（）＆GT; | ＆lt;交褪色（）＆GT; | ＆LT;梯度＆GT;

为了达到你想要的效果，需要2个div，如下所示：

background-image

.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);
}

请注意，您必须向其他div添加<body> <div class="background-image"></div> <div style="background-color: yellow;position:relative;"> <p>Some text that shouldn't be blurred!</p> </div> </body>，以使其显示在background-image div上方。

我使用CSS3 position:relative（视图宽度）和vw（视图高度）来强制vh div的宽度和高度，但您可以使用{{ 1}}而不是。

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

1 个答案: