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

【问题标题】：Blur background - Jquery / Pure CSS / Image?模糊背景 - Jquery / Pure CSS / Image？
【发布时间】：2013-06-17 13:01:36
【问题描述】：

我需要创建一个页面，其中包含全屏封面图片和 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 或组合获得类似的结果？

【问题讨论】：

是的。我使用 Photoshop 制作了不透明度为 50% 的渐变图像。使它成为一个 1px 宽的 png 并跨越我的顶部 div 的背景。然后无论它在哪里，都带有轻微的紫色背景渐变，但通过它仍然可以看到页面背景。至少，这是我能想到的最接近的事情以及我是如何做到的。
我唯一的建议是尝试使用 z-index，但不确定在这种情况下是否有帮助
@SpYk3HH 没有理由在现代浏览器中使用单独的图像；甚至 IE6 也能够渲染具有部分透明度的纯色背景。
这种事情单靠 CSS 是不可能的。您可能可以编写一个插件来重新采样 div 覆盖的背景区域，添加一些模糊，然后将其放入 div 的 bg 中，但这对您和浏览器都可能有点工作。不过，这是一个很好的效果。
@Pointy 如果您已经必须加载图像，如果图像已经具有不透明度，为什么还要浪费额外的资源？这就是我这样做的原因。我有 Photoshop，所以就像制作纯背景一样简单

标签： javascript jquery html css

【解决方案1】：

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

【讨论】：

这是link-only answer。请为您的链接添加上下文。
@Doorknob 有时我们只需要一个链接...谢谢 Wojciech Budniak

【解决方案2】：

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

Background blur with CSS

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

不知道有没有帮助。

【讨论】：

这是link-only 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 移动到哪里，它看起来都会像模糊背景一样。

【讨论】：

不幸的是，即使在今天，浏览器对此的支持也非常有限。例如。所有 IE 版本和 Edge 都无法使用过滤器。

【解决方案4】：

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

【讨论】：