CSS 是否可以使用 -webkit-filter: blur(); 在背景图像上？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13168142/
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
Is it possible to use -webkit-filter: blur(); on background-image?
提问by Elijah Lynn
Is it possible to use -webkit-filter: blur();on background-image?
是否可以-webkit-filter: blur();在背景图像上使用？
I have tried this code and it just blurs everything but the background-image:
我试过这段代码，它只是模糊了除背景图像之外的所有内容：
body {
background-image: url('http://www.publicdomainpictures.net/pictures/10000/velka/pebbles-and-sea-11284647414Rbeh.jpg');
background-attachment: fixed;
-webkit-filter: blur(5px);
}
I have been searching for a while but cannot find anyone resources describing how to do this.
我已经搜索了一段时间，但找不到任何描述如何执行此操作的资源。
回答by JuanOjeda
FUTURE USERS: This is not supported in IE7, IE8, IE9, IE10, IE11 or the current version of EDGE.
未来用户：IE7、IE8、IE9、IE10、IE11 或当前版本的 EDGE 不支持此功能。
DO NOT USE on a real site, unless you have a fallback.
不要在真实站点上使用，除非您有备用方案。
If you're looking for a solution that doesn't rely on extra markup, you could apply the background image and filter to a pseudo element on the body.
如果您正在寻找一种不依赖于额外标记的解决方案，您可以将背景图像和过滤器应用于主体上的伪元素。
body {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
height: 100%;
}
body:before {
content: "";
position: absolute;
background: url(http://lorempixel.com/420/255);
background-size: cover;
z-index: -1; /* Keep the background behind the content */
height: 20%; width: 20%; /* Using Glen Maddern's trick /via @mente */
/* don't forget to use the prefixes you need */
transform: scale(5);
transform-origin: top left;
filter: blur(2px);
}
Check it out this JsFiddle.
看看这个 JsFiddle。
回答by Rick Calder
Don't apply it to the body, apply it to a full size container as below, set the container size and position to absolute and then the rest of the content to relative and set the z-indexes.
不要将其应用于正文，将其应用于如下所示的全尺寸容器，将容器大小和位置设置为绝对值，然后将其余内容设置为相对值并设置 z-indexes。
?<body>
<div class="bgImageContainer">
</div>
<div class="content"> Some text and stuff here</div>
</body>?????????????????????????????????????????????????????????????????????????
.bgImageContainer{
background-image:url('http://www.whitegadget.com/attachments/pc-wallpapers/16950d1224057972-landscape-wallpaper-blue-river-scenery-wallpapers.jpg');
width:500px;
height:400px;
-webkit-filter: blur(5px);
z-index:0;
position:absolute;
}
.content{
z-index:10;
position:relative;
}
Edit - Updated the fiddle, the old image wasn't working any more.
编辑 - 更新了小提琴，旧图像不再起作用。
回答by Md Imran Choudhury
If background for the full page then this is the best solution for me.
如果整个页面的背景那么这对我来说是最好的解决方案。
body {
//background-color: black; use it if you don't want the background border
}
body:before {
content: '';
position: fixed;
width: 100vw;
height: 100vh;
background-image: url('http://www.publicdomainpictures.net/pictures/10000/velka/pebbles-and-sea-11284647414Rbeh.jpg'); // your image
background-position: center center;
background-repeat: no-repeat;
background-position: 100% 100%;
background-size: cover;
filter: blur(2px);
z-index: -9;
}
