我可以将 CSS 过滤器应用于背景图像吗?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/13526083/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I apply a CSS filter to a background image?
提问by Nick Ginanto
I'd like to have a picture in the background like this
我想要一张像这样的背景图片
body{
background-color: transparent !important;
background-image: url("img.jpg");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px)
}
but also have a blur filter on it.
但也有一个模糊过滤器。
However, when I put it on the body , the blur is on everything but the background image.
然而,当我把它放在 body 上时,除了背景图像之外的所有东西都模糊了。
Is there a way to apply the blur only on the background image? (besides doing the blur in photoshop or similar.
有没有办法只在背景图像上应用模糊?(除了在 Photoshop 或类似软件中进行模糊处理。
采纳答案by Naveen Sharma
Blur will work on background image of any container except body.
模糊适用于除主体之外的任何容器的背景图像。
filter: blur(20px)
Demo is Here
演示在这里