1

I need to create a page which has a full screen cover image and 2 div blocks containing content that sit on top of this cover image.

The div blocks need to have a slightly greyed blurred background effect - similar to the effect used by the Yahoo Weather app

(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)

but rather than blurring the entire background I need only the overlayed div background to be blurred - rather than the whole thing, which gives me a headache!

Has anyone managed to acheive a similar result - or have any idea if its possible via Jquery/ Pure Css or a combo?

4

4 回答 4

3

有一个名为blur.js的 jQuery 插件，它声称可以做你想做的事。虽然没有检查过。

于 2013-06-17T13:15:32.910 回答
1

我只是想出了如何做到这一点！背景和内容 div 都需要具有相同的背景和相同的定位/大小。并background-attachment: fixed在他们两个上使用。您可以使用 来模糊 div -webkit-filter: blur(5px);。根据页面上其他事物的位置，您可能需要使用 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 移动到哪里，它看起来都会像模糊背景一样。

于 2013-10-06T20:44:28.920 回答
1

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

使用 CSS 进行背景模糊

开发人员使用 svg blur 来提供模糊效果。

不知道这是否有帮助。

于 2013-06-17T13:09:18.413 回答
0

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

于 2013-06-17T14:06:33.690 回答