如何模糊div后面的动态内容？

Question

我正在处理一个全屏样式的谷歌地图页面的项目。是否有任何方法（CSS，jQuery或其他选项…）可以覆盖具有类似于iOS霜/模糊效果的标题和滑入侧边栏？

我想实现类似这样的效果。 示例模糊标题 我的问题是，因为我不控制标题下方的内容并且它经常更改，所以我无法使用两个图像技巧来模拟模糊背景。有什么建议吗？

- Steven Pantin

---

尽管您可以使当前元素模糊，但我认为没有任何方式可以使元素后面的内容模糊... - Niet the Dark Absol

backdrop-filter 是一种目前几乎没有浏览器支持的特性。它可以实现背景模糊效果。 - gcampbell

您可以使用剪裁蒙版将动态内容复制到新元素中，然后对其进行模糊处理。 - Jeremy Blalock

截至2019年，Chrome、Edge、Safari和Opera已经支持backdrop-filter。 - Pedro Estevão

Answer 1

请阅读这篇文章https://dev59.com/8GIk5IYBdhLWcg3wAJyE#19688466和相关链接http://abduzeedo.com/ios7-frosted-glass-effect-html-5-and-javascript 解决方案如下：

1. 渲染HTML
2. 复制内容区域并将其转换为画布。
3. 将画布移动到页眉部分
4. 将内容的滚动与页眉中的画布同步

在页面底部有一个示例（窄屏幕）。可能会有一些缺失的图像或其他问题，导致页面有点混乱，但请尝试滚动。但我不确定您提到的内容更改频率。这可能会导致严重的性能问题。但是请尝试。

我认为没有其他选项可以实现您想要的非常复杂的内容。

- actimel

Answer 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); }

- Armstrongest

Answer 3

使用背景滤镜，它现在被许多浏览器支持：

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

- Marton

---

被低估了，却完美无缺！ - gillall

Answer 4

css模糊效果可行吗？

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

- Jacob J

---

不，这是关于模糊背景的事情。 - gcampbell