Question

我正在使用全屏风格的谷歌地图页面开展项目。是否有任何方式（css，jQuery或其他选项......）覆盖标题和滑入式侧边栏，其模糊效果类似于iOS磨砂/模糊效果？

我试图实现这样的目标。 Sample blurred header

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

Answer 1

阅读此帖子https://stackoverflow.com/a/19688466/1663572及相关链接http://abduzeedo.com/ios7-frosted-glass-effect-html-5-and-javascript

解决方案使用此步骤。

渲染HTML

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

将画布移动到页眉部分

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

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

我没有想到任何其他选择来实现你想要的非常复杂的想法。

Answer 2

如果您要加载外部图片，那么可以将其作为背景加载到svg容器中并应用feGaussianBlur过滤器吗？不确定你对标记有多少控制权。

W3学校关于模糊的初级读物：

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

Answer 3

css会模糊吗？

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

Answer 4

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

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

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

4 个答案: