如何在背景速记中实现CSS模糊？
[英]How to implement a CSS blur within background shorthand?
问题描述
The goal is to blur the background without blurring all of the other elements above it. 
目的是使背景模糊而不使背景上方的所有其他元素模糊。
The method of using separate divs for background and content and relying on z-indexes has proven a little inflexible for me, so I want to know if it is possible to implement the CSS blur filter in the background shorthand syntax (since "background-filter: blur(5px)" is not valid CSS) which will only apply it to the background. 对我来说，使用单独的div作为背景和内容并依赖z-index的方法对我来说有点不灵活，所以我想知道是否有可能在背景速记语法中实现CSS模糊过滤器（因为“ background-filter ：blur（5px）“是无效的CSS），只会将其应用于背景。
Tesla did this quite well with shorthand notation, but they used a transparent/black gradient whereas I want to use a blur. 特斯拉的速记方式做得很好，但是他们使用了透明/黑色渐变，而我想使用模糊。 Here's some simplified code that I've tried that's based off of the Tesla login page: 这是我尝试过的一些简化代码，这些代码基于Tesla登录页面：
HTML: 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: 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;
}
Here's a JSFiddle so you can see what it looks like. 这是一个JSFiddle，因此您可以看到它的外观。
Then when I try to change that shorthand filter from radial-gradient to blur, it stops working: 然后，当我尝试将速记滤波器从径向渐变更改为模糊时，它停止工作：
CSS: CSS：
.background-image{
background: blur(5px), gray url(http://leecamp.net/wp-content/uploads/kitten-3.jpg) no-repeat center center fixed;
}
I'm not sure if the blur syntax here just isn't right/it needs to be different for shorthand, or maybe this is the completely wrong way of going about this. 我不确定这里的模糊语法是否不合适/简写形式是否需要不同，或者这可能是完全错误的解决方法。 Is it even possible to blur in shorthand like this? 这样甚至可能使速记模糊吗？
1 个解决方案
解决方案1
0 已采纳 2017-08-10 02:15:35
The problem is that blur is not a value of the background property but rather of filter . 问题在于blur不是background属性的值，而是filter 。 According to Mozilla : 根据Mozilla的说法：
The background CSS property is a shorthand for setting the individual background values in a single place in the style sheet.
Tesla can use a background-gradient because The background-image property can have as it's values: Tesla可以使用background-gradient因为background-image属性可以具有其值：
<bg-image>#
where <bg-image> = none |
where <image> = <url> |
To accomplish what you want, it will take 2 divs, something like this: 要完成您想要的操作，将需要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>
Note that you will have to add a position:relative to your other div so that it appears above the background-image div. 请注意，您将必须添加一个position:relative对于其他div的position:relative ，以使其显示在背景图像div上方。
I have used the CSS3 vw (view-width) and vh (view-height) to force the width and height of the background-image div, but you could use % instead. 我已经使用CSS3 vw （视图宽度）和vh （视图高度）来强制background-image div的宽度和高度，但是您可以改用% 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.