如何模糊 div 背后的动态内容？答案

【问题标题】：How can I blur the dynamic contents behind a div?如何模糊 div 背后的动态内容？
【发布时间】：2016-07-25 18:31:05
【问题描述】：

我正在开发一个带有全屏样式的谷歌地图页面的项目。是否有任何方法（css、jQuery 或其他选项...）以类似于 iOS 磨砂/模糊效果的模糊效果覆盖标题和滑入式侧边栏？

我正在努力实现这样的目标。 Sample blurred header

我的问题是，因为我无法控制标题下方的内容并且它不断变化，所以我无法使用 2 图像技巧来模拟模糊的背景。有什么建议吗？

【问题讨论】：

虽然你可以模糊当前元素，但我不相信有任何方法可以模糊元素后面的内容......
backdrop-filter，但目前几乎没有浏览器支持。
您可以将动态内容复制到一个新元素中，带有clipping mask，然后对内容进行模糊处理。
截至 2019 年，Chrome、Edge、Safari 和 Opera 已经支持backdrop-filter。

标签： javascript jquery html css

【解决方案1】：

阅读这篇文章https://stackoverflow.com/a/19688466/1663572和相关链接http://abduzeedo.com/ios7-frosted-glass-effect-html-5-and-javascript

解决方案使用此步骤。

呈现 HTML

复制内容区域并将其转换为画布。

将画布移动到页眉部分

将内容的滚动与标题中的画布同步

页面下方是一个示例（狭窄的示例）。有一些丢失的图像或其他东西，有点溢出，但请尝试滚动。但我不确定你提到的内容的变化频率。这可能会导致严重的性能问题。不过试试看。

我想不出任何其他选择来实现您想要的非常复杂的想法。

【讨论】：

【解决方案2】：

如果您正在加载外部图像，那么您能否将其加载到svg 容器中作为背景并应用feGaussianBlur 过滤器？不确定您对标记的控制程度。

关于模糊的 w3 Schools 入门：

http://www.w3schools.com/svg/svg_fegaussianblur.asp

一个 jsfiddle（不是我的）：

https://jsfiddle.net/jamygolden/yUG5U/2/

示例标记：

<svg id="svg-image-blur">
    <image x="0" y="0" id="svg-image" width="300" height="200" xlink:href="http://path/to.your/image.jpg" />

    <filter id="blur-effect-1">
        <feGaussianBlur stdDeviation="2" />
    </filter>
</svg>

CSS：

#svg-image-blur { height: 200px; width: 300px; }
#svg-image:hover { filter:url(#blur-effect-1); }

【讨论】：

【解决方案3】：

使用背景滤镜，现在很多浏览器都支持：

backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);

【讨论】：

被低估且完美！

【解决方案4】：

css 模糊会起作用吗？

-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);

【讨论】：

不，这是关于模糊背后的东西。