Html 使用 div 模糊它后面的图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19687846/
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
using a div to blur an image behind it?
提问by Dr Robotnik
Is it possible to code a div to enable it to blur whatever image is under it?
是否可以对 div 进行编码以使其能够模糊其下方的任何图像？
something like this:
像这样：
Could this be done somehow with -webkitmaybe?
这可以用某种方式完成-webkit吗？
回答by Dre
Not with CSS on its own, but you can pull a similar effect off with Canvas and the StackBlurforCanvas library. See this
不能单独使用 CSS，但您可以使用 Canvas 和 StackBlurforCanvas 库实现类似的效果。看到这个
UPDATE:Looks like backdrop-filterwas recently introduced to Webkit nightly,so eventually we'll be able to do this with CSS only. Yay!
更新：看起来就像backdrop-filter是最近推出的Webkit夜间，所以最终我们就可以只用CSS来做到这一点。好极了！
回答by Tim Ebenezer
Unfortunately this can't be done purely using CSS. Although webkit-filter supports blur, it doesn't support blurring anything other than the element that it applies to.
不幸的是，这不能完全使用 CSS 来完成。虽然 webkit-filter 支持模糊，但它不支持模糊它所应用的元素以外的任何东西。
There is a more hacky way to do this, described here - http://css-tricks.com/blurry-background-effect/
有一种更hacky的方法来做到这一点，这里描述 - http://css-tricks.com/blurry-background-effect/
