看起来苹果的覆盖不仅仅是一种透明度。关于如何使用 CSS 和可能的 JS 实现这种效果的任何想法？
iOS 7 使用 CSS 的模糊叠加效果？
IT技术
javascript
css
user-interface
blur
2021-01-24 13:25:45
6个回答
CSS3 是可能的：
#myDiv {
-webkit-filter: blur(20px);
-moz-filter: blur(20px);
-o-filter: blur(20px);
-ms-filter: blur(20px);
filter: blur(20px);
opacity: 0.4;
}
此处示例 => jsfiddle
你让我想尝试，所以我做了，看看这里的例子：
http://codepen.io/Edo_B/pen/cLbrt
使用：
- 硬件加速 CSS 过滤器
- 用于类分配和箭头键事件的 JS
- 图像 CSS 剪辑属性
而已。
我也相信这可以在任何屏幕上动态完成，如果使用画布复制当前 dom 并对其进行模糊处理。
[编辑] 在未来的（移动）Safari 9 中将会有-webkit-backdrop-filter这个功能。看看我为展示它而制作的这支笔。
在过去的 4 周里，我一直在思考这个问题，并提出了这个解决方案。
[编辑] 我写了一篇关于CSS-Tricks的更深入的帖子
此技术使用CSS 区域，因此目前浏览器支持不是最好的。（http://caniuse.com/#feat=css-regions）
该技术的关键部分是使用 CSS Region 从布局中分离内容。首先定义一个.content元素，flow-into:content然后使用适当的结构来模糊标题。
布局结构：
<div class="phone">
<div class="phone__display">
<div class="header">
<div class="header__text">Header</div>
<div class="header__background"></div>
</div>
<div class="phone__content">
</div>
</div>
</div>
这个布局的两个重要部分是.header__background和.phone__content- 这些是内容应该流动的容器。
使用 CSS 区域很简单，因为flow-from:content（.content流入命名区域content）
现在是棘手的部分。我们希望内容始终通过 ，.header__background因为那是内容会模糊的部分。（使用webkit-filter:blur(10px);）
这样做transfrom:translateY(-$HeightOfTheHeader)是.content为了确保内容始终通过.header__background. 这种转换总是在标题下隐藏一些内容。解决这个问题很容易添加
.header__background:before{
display:inline-block;
content:'';
height:$HeightOfTheHEader
}
以适应变换。
这目前在：
- Chrome 29+（启用'experimental-webkit-features'/'enable-experimental-web-platform-features'）
- Safari 6.1 种子 6
- iOS7（缓慢且无滚动）
由于元素样式属性，FireFox 现在可以做到这一点。
此实验性属性允许您使用任何 HTML 内容作为背景图像。因此，要创建背景，您需要三个叠加层：
- 带有纯色背景的简单叠加（隐藏真实的叠加内容）。
- 与
-moz-element设置内容的背景叠加。请注意，FX 不支持该filter: blur()属性，因此我们需要一个 SVG。 - 与非模糊内容叠加。
所以，放在一起：
SVG 模糊滤镜（适用于 FX，其他浏览器可以使用filter:blur()）：
<svg>
<defs>
<filter id="svgBlur">
<feGaussianBlur stdDeviation="10"/>
</filter>
</defs>
</svg>
CSS 模糊样式：
.behind-blur
{
filter : url(#svgBlur);
opacity: .4;
background: -moz-element(#content);
background-repeat: no-repeat;
}
最后3层：
<div class="header" style="background-color: #fff"> </div>
<div class="header behind-blur"> </div>
<div class="header">
Header Text, content blurs behind
</div>
然后要移动它，只需设置background-position（jQuery 中的示例，但您可以使用任何东西）：
$('.behind-blur').css({
'background-position': '-' + left + 'px -' + top + 'px'
});
查看此演示页面。
该演示使用 html2canvas 将文档呈现为图像。
http://blurpopup.labs.daum.net/
- 单击“显示弹出窗口”链接时，将调用“makePopup”函数。
- 'makePopup' 运行html2canvas以将文档呈现为图像。
- 图像被转换为 data-url 字符串，并被绘制为弹出窗口的背景图像。
- Popup 的 bg 被-webkit-filter:blur 模糊
- 将弹出窗口附加到文档中。
- 当您拖动弹出窗口时，它会更改自己的背景位置。