javascript - 模糊背景 - Jquery/纯 CSS/图像？

Question

我需要创建一个页面，其中包含一个全屏封面图像和 2 个包含位于该封面图像顶部的内容的 div block 。

div block 需要具有略带灰色的模糊背景效果 - 类似于 Yahoo Weather 应用程序使用的效果

( https://www.google.co.uk/search?client=firefox-a&hs=xQa&rls=org.mozilla:en-US:official&channel=fflb&q=yahoo+weather+design+blur&bav=on.2,or.r_qf.&bvm=bv.47883778,d.d2k&biw=1484&bih=770&um=1&ie=UTF-8&hl=en&tbm=isch&source=og&sa=N&tab=wi&ei=Mge_Uau-IKiu0QXzyYGADw#facrc=_&imgrc=W3T7q2pDARrKhM%3A%3ByIOTpupTmTIpRM%3Bhttp%253A%252F%252Fimg.gawkerassets.com%252Fimg%252F18l0kjccthmtjjpg%252Foriginal.jpg%3Bhttp%253A%252F%252Fwww.gizmodo.com.au%252F2013%252F04%252Fyahoo-just-made-the-most-beautiful-weather-app%252F%3B960%3B540 )

但是我不需要模糊整个背景，我只需要模糊覆盖的 div 背景——而不是整个背景，这让我很头疼!

有没有人设法达到类似的结果 - 或者知道是否可以通过 Jquery/Pure Css 或组合实现？

Answer 1

有一个名为 blur.js 的 jQuery 插件声称做你想做的事。不过还没有检查过。