是什么'毛玻璃'效果可实现的CSS只在这个时候？ [英] Is the 'frosted glass' effect implementable with CSS only at this time?
问题描述
磨砂玻璃效果（其中叠加层模糊和着色下面是它）是iOS中的常见UI元素。
The frosted glass effect (where an overlay both blurs and tints what is below it) is a common UI element in iOS.
目前有没有使用CSS实现？有很多关于这一点的问题，但他们在他们能做什么有限。他们通常仅限于在图片上放置叠加层 - 而不是完全渲染的UI。
Is there currently anyway to implement that with CSS? There are a lot of questions pertaining to this, but they are limited in what they can do. They typically are limited to putting an overlay over an image--rather than a completely rendered UI.
因此，为了清楚起见，我不是在寻找一种方法模糊图像本身，但一种方式模糊UI下面的元素。所以说，我有一个HTML表单与HTML按钮和HTML文本，我想在它们上面放置一个div，以便下面的任何内容模糊。然后我可以滚动下面的内容，作为元素进出覆盖，它们只有在div下才模糊。
So, to be clear, I'm not looking for a way to blur an image by itself, but a way to blur the UI below an element. So say I have an HTML form with HTML buttons and HTML text, and I want to place a div above them all so that whatever is below looks blurred. And then I can perhaps scroll what is below and as elements come in and out of the overlay, they are blurred only while under the div.
我的理解是，答案这是否，这是目前不可能与CSS ，但我也有点生锈的新的钟声和口哨...
My understanding is that the answer to this is no, this is not currently possible with CSS but I'm also a bit rusty on the new bells and whistles...
推荐答案
您正在寻找的是 backdrop-filter ，自2015年8月起已在webkit中（ see post ）。它是在Safari 9中发布的（ 2015年9月30日，作为OS X El Capitan的一部分），并通过启用实验性网络平台功能[...] 标记。
What you are looking for is backdrop-filter, which has been in webkit since August 2015 (see post). It was shipped in Safari 9 (September 30, 2015, part of OS X El Capitan) and works in Chrome today by enabling the Experimental Web Platform features [...] flag.
使用背景过滤器，获得实时模糊与添加 background-filter：blur（10px）到给定的元素。
With backdrop-filter, getting the 'live blur' is as easy as adding backdrop-filter: blur(10px) to a given element.
演示此处。
这可能会是一段时间，直到它成为主流，但它会使我们做得比磨砂玻璃效果更多夜间模式，在此阅读更多）。
好消息是，很多人都对此感到兴奋，所以让我们希望我们不必等待很长时间。如果curios，这里的规格。
It's probably going to be a while until it becomes mainstream though, but it's going to enable us to do so much more than the frosted glass effect (i.e. night mode, read more here). The good news is that tons of people are excited about it, so let's hope we don't have to wait long. If curios, here's the spec for it.
如果您要跟踪此功能的进度，请查看：
If you want to track progress on this feature, check out:
- Mozilla bug
- Chrome bug & Chrome status
- Microsoft bug
这篇关于是什么'毛玻璃'效果可实现的CSS只在这个时候？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
