Question

我希望在我的网站导航区域为所有浏览器（跨浏览器）实现磨砂玻璃效果

要求是将标题图层后面的任何内容设为iOS蓝色与http://goo.gl/X5FEiH

相同

页面上包含图片，文字的任何内容也应该在此标题后面向下滚动时变得模糊。我用Google搜索并发现了许多结果，常见的做法是加载两个图像，一个orignal和第二个模糊滤镜，但它不适用于页面文本。

以下是我迄今为止所做的事情http://goo.gl/m2s1dA

需要帮助，请帮助。

由于

Answer 1

目前只能在WebKit nightlies和Safari 9中使用，这是测试版。

-webkit-backdrop-filter: blur(10px);

请参阅introductory blog post on webkit.org进行讨论。从帖子：

标准化

WebKit去年向CSS工作组提出了这个功能，它目前在CSS滤波器2级规范的编辑草案中。

您可以使用background-attachment: fixed实现相同的效果：

body {
    background-image: url(image.jpg) no-repeat 50% 50%;
    background-attachment: fixed;
}

nav {
    background-image: url(image-blurred.jpg) no-repeat 50% 50%;
    background-attachment: fixed;
}

background-attachment: fixed的工作方式是背景图像应用于整个视口，而元素就像一个蒙版，只显示元素内容框后面的背景图像部分。

iOS使用CSS对页面内容进行磨砂玻璃效果

1 个答案:

标准化