javascript 模糊背景 - Jquery / Pure CSS / Image？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17148114/
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
Blur background - Jquery / Pure CSS / Image?
提问by Dancer
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.
我需要创建一个页面，该页面具有全屏封面图像和 2 个包含位于此封面图像顶部的内容的 div 块。
The div blocks need to have a slightly greyed blurred background effect - similar to the effect used by the Yahoo Weather app
div 块需要有一个稍微灰色的模糊背景效果 - 类似于雅虎天气应用程序使用的效果
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!
但不是模糊整个背景，我只需要模糊覆盖的 div 背景 - 而不是整个事情，这让我很头疼！
Has anyone managed to acheive a similar result - or have any idea if its possible via Jquery/ Pure Css or a combo?
有没有人设法获得类似的结果 - 或者知道是否可以通过 Jquery/Pure Css 或组合实现？
回答by Wojciech Budniak
回答by Carson Wright
I don't know if this will help, but it gives a blur effect. A similar question was asked here:
我不知道这是否会有所帮助，但它会产生模糊效果。在这里问了一个类似的问题：
The developer used a svg blur to give a blur effect.
开发人员使用 svg 模糊来产生模糊效果。
Don't know if that helps.
不知道这是否有帮助。
回答by Sam Murphey
I just figured out how to do this! The background and the content divs both need to have the same background with the same positioning/size. and use background-attachment: fixedon both of them. You can blur the div with -webkit-filter: blur(5px);. You may need to use z-index depending on the location of other things on the page. Also if you want content inside the blurred div it will have to be in a completely separate div positioned on top of it, otherwise everything inside will get blurred too. Here's the code:
我刚刚想出了如何做到这一点！背景和内容 div 都需要具有相同的背景和相同的定位/大小。并background-attachment: fixed在两者上使用。您可以使用-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>
I couldnt get jsfiddle to work for this, so if someone could make that it would be awesome. The whole idea here is that both the divs have the exact same content in the same place. That way no matter where the blurred div moves it will look like its blurring the background.
我无法让 jsfiddle 为此工作，所以如果有人能做到这一点，那就太棒了。这里的整个想法是两个 div 在同一个地方具有完全相同的内容。这样无论模糊的 div 移动到哪里，它看起来都像是在模糊背景。
回答by Last Rose Studios
you can probably use the css3 filter:blur() property to get the image blurred, but you would need to have the background image the same (and in the same position) as the background element. you would also need to make sure that the blurred element is separate from the content you want to add (:before) because otherwise it'll blur the content as well. You can change the saturation, and other elements as well using the filter property.
您可能可以使用 css3 filter:blur() 属性来模糊图像，但是您需要使背景图像与背景元素相同（并且位置相同）。您还需要确保模糊元素与您要添加的内容分开 (:before)，否则它也会使内容模糊。您可以使用过滤器属性更改饱和度和其他元素。
