磨砂玻璃效果(其中叠加层均模糊并且在其下方的色调)是iOS中常见的UI元素.
目前无论如何用CSS实现它？有很多与此相关的问题,但它们的功能有限.它们通常仅限于在图像上放置叠加层 – 而不是完全渲染的UI.
所以,要清楚,我不是要找一种模糊图像的方法,而是一种模糊元素下方UI的方法.所以说我有一个带有HTML按钮和HTML文本的HTML表单,我想在它们上面放置一个div,以便下面的任何内容看起来都很模糊.然后我也可以滚动下面的内容,当元素进出叠加层时,它们只在div下面模糊.
我的理解是,答案是否定的,目前CSS不可能,但我对新的铃声和口哨也有点生疏……
解决方法
您正在寻找的是背景过滤器,自2015年8月(
see post)以来一直在webkit中.它是在Safari 9(
September 30,2015,OS X El Capitan的一部分)中发布的,并且今天通过启用实验性Web平台功能标志在Chrome中运行.
使用背景滤镜,获得“实时模糊”就像添加背景滤镜：模糊(10px)到给定元素一样简单.
演示here.
它可能会有一段时间,直到它成为主流,但它将使我们能够做到比磨砂玻璃效果(即夜间模式,read more here)更多.
好消息是,有很多人对此感到兴奋,所以我们希望我们不必等待很长时间.如果古玩,here’s的规格.
如果您想跟踪此功能的进度,请查看：
