Question

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

div块需要略微模糊的背景效果 - 类似于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插件声称可以执行您想要的操作。虽然没有检查过。

Answer 2

我不知道这是否会有所帮助，但它会产生模糊效果。这里也提出了类似的问题：

Background blur with CSS

开发人员使用svg模糊来产生模糊效果。

不知道这是否有帮助。

Answer 3

我刚想出怎么做！背景和内容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移动到哪里，它看起来都会模糊背景。

Answer 4

您可以使用css3 filter：blur（）属性来使图像模糊，但您需要使背景图像与背景元素相同（并且位于相同位置）。您还需要确保模糊元素与您要添加的内容（：之前）分开，否则它也会模糊内容。您也可以使用filter属性更改饱和度和其他元素。

模糊背景 - Jquery / Pure CSS / Image？

4 个答案: