我需要创建一个页面，它有一个全屏封面图像和2个div块包含的内容，坐在这个封面图像的顶部。
div块需要有一个微灰模糊的背景效果-类似于雅虎天气应用
使用的效果(https://www.google.co.uk/search?client=firefox-a& h = xQa& rls = org.mozilla: en - us: official&信道= fflb& q =雅虎+天气+设计+ blur& bav = on.2 or.r_qf。amp; bvm = bv.47883778 d.d2k&车身= 1484,波黑= 770,嗯= 1,即= UTF-8& hl = en& tbm = isch&源= og& sa = N&标签= wi& ei = Mge_Uau-IKiu0QXzyYGADw # facrc = _& imgrc 3 = W3T7q2pDARrKhM % % 3 byiotpuptmtiprm % 3 bhttp % % 252 f % 253 252 fimg.gawkerassets.com % 252 fimg % 252 f18l0kjccthmtjjpg % 252 foriginal.jpg % 3 bhttp % 253 252 fwww.gizm % 252 f %odo.com.au % 252 f2013 % 252 f04 % 252 fyahoo-just-made-the-most-beautiful-weather-app % 252 f % 3 b960 % 3 b540)
但不是模糊整个背景，我只需要模糊叠加的div背景-而不是整个东西，这让我头痛!
有没有人设法实现类似的结果-或有任何想法，如果它可能通过Jquery/纯Css或组合?
有一个叫做blur.js的jQuery插件，它声称可以做你想做的事情。还没检查过呢
我不知道这是否有帮助，但它会产生模糊效果。类似的问题是问:
背景模糊与CSS
开发者使用svg模糊来呈现模糊效果。
不知道这是否有帮助
我刚刚知道如何做到这一点!背景和内容div都需要具有相同的背景和相同的定位/大小。用background-attachment: fixed来处理它们。你可以用-webkit-filter: blur(5px);模糊这个div。您可能需要根据页面上其他内容的位置使用z-index。此外，如果你想在模糊的div中包含内容，它必须在它的顶部放置一个完全独立的div，否则里面的所有内容也会被模糊。下面是代码:
<body style="margin: 0px;">
<div id="bg" style="background: url('images/1.png') no-repeat; background-attachment: fixed; min-width: 100%; min-height: 100%;">
<div id="blur-cutoff" style="width: 280px; height: 280px; position: absolute; left: 50%; margin-left: -140px; margin-top: 10px; overflow: hidden;">
<div id="blur" style="width: 300px; height: 300px; background: url('images/1.png') no-repeat; background-attachment: fixed; margin-left: -150px; left: 50%; -webkit-filter: blur(5px); position: absolute;">
</div>
</div>
<div id="unblur" style="width: 300px; height: 300px; position: absolute; left: 50%; margin-left: -150px; z-index: 2;">
<p class="blurtext" style="font-family: tahoma; color: #FFFFFF; text-align: center; line-height: 300px;">This is the blurred div</p>
</div>
</div>
</body>
我找不到jsfiddle来做这个，所以如果有人能做到这一点，那就太棒了。这里的整个想法是，两个div在相同的位置有完全相同的内容。这样，无论模糊的div移动到哪里，它看起来都像是在模糊背景。
您可能可以使用css3 filter:blur()属性来模糊图像，但是您需要使背景图像与背景元素相同(并且位于相同的位置)。您还需要确保blurred元素与您想要添加的内容(:before)分开，因为否则它也会模糊内容。你可以改变饱和度，以及使用滤镜属性的其他元素