Html 如何使用 CSS 创建磨砂玻璃效果？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17089927/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a frosted glass effect using CSS?
提问by user2463516
I'd like to create a divthat is fixed in one position and make it translucent - making the contents behind it partially visible and blurred. The style I'm looking for is similar to the divof the 'See All' thumbnails in the Apple website.
我想创建一个div固定在一个位置并使其半透明 - 使其后面的内容部分可见和模糊。我正在寻找的样式类似于Apple 网站div中的“查看全部”缩略图。
The only thing I can do is adjust opacity: 0.9but I cannot blur the contents that go under the div.
我唯一能做的就是调整，opacity: 0.9但我不能模糊div.
Note: The divhas a fixed position and the background scrolls. The background that scolls is a mix of text and photos.
注意：div有一个固定的位置和背景滚动。scolls 的背景是文本和照片的混合。
回答by Patrick Favre
CSS
CSS
CSS 3 has a blur filter (only webkit at the moment Nov 2014):
CSS 3 有一个模糊过滤器（目前只有 webkit 2014 年 11 月）：
-webkit-filter: blur(3px); /*chrome (android), safari (ios), opera*/
IE 4-9 supports a non-standard filter
IE 4-9 支持非标准过滤器
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3')
See some nice demo for the blur and other filters here.
For future reference here is the compatibility table for CSS filter. Firefox seems to be getting the feature in v35+ while even IE11 does not seem to have any compatibility.
为了将来参考，这里是 CSS filter 的兼容性表。Firefox 似乎在 v35+ 中获得了该功能，而即使 IE11 似乎也没有任何兼容性。
SVG
SVG
An alternative is using svg (safe for basically IE9 and up):
另一种方法是使用 svg（对于 IE9 及更高版本是安全的）：
filter: url(blur.svg#blur);
SVG:
SVG：
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="3" />
</filter>
</svg>
Javascript
Javascript
You will achieve the highest browser compatibility with javascript, but usually the slowest performance and added complexity to your js.
您将实现与 javascript 的最高浏览器兼容性，但通常是最慢的性能并增加了您的 js 的复杂性。
- http://www.blurjs.com/(jquery plugin, canvas solution so IE9+, FF, Chrome support)
- http://nbartlomiej.github.io/foggy/(jquery plugin IE8+, FF,Chrome support)
- http://www.blurjs.com/（jquery插件，canvas 解决方案，IE9+，FF，Chrome 支持）
- http://nbartlomiej.github.io/foggy/（jquery插件 IE8+、FF、Chrome 支持）
回答by Vitim.us
You can use CSS image filter.
您可以使用 CSS 图像过滤器。
-webkit-filter: blur(2px);
filter : blur(2px);
More info on CSS image filters:
有关 CSS 图像过滤器的更多信息：
- http://techstream.org/Web-Design/CSS3-Image-Filters
- http://html5-demos.appspot.com/static/css/filters/index.html
- http://techstream.org/Web-Design/CSS3-Image-Filters
- http://html5-demos.appspot.com/static/css/filters/index.html
Demo: JSFIDDLE
演示：JSFIDDLE
But in fact, they are using pre processed JPG, and just using it as a overlay in the correct position.
但实际上，他们使用的是经过预处理的 JPG，并且只是将其用作正确位置的叠加层。
#background {
position: absolute;
left: 10px;
top: 10px;
width: 600px;
height: 600px;
background-image: url(http://images.apple.com/home/images/osx_hero.jpg);
background-position: 0 0;
}
#blur {
position: absolute;
left: 50px;
top: 50px;
width: 120px;
height: 500px;
background-image: url(http://images.apple.com/home/images/osx_hero_blur.jpg);
background-position: -50px -50px;
}
<div id="background">
<div id="blur"></div>
</div>
Demo: JSFIDDLE
演示：JSFIDDLE
回答by Edo Ben Shitrit
You made me want to try, so I did, check out the example here:
你让我想尝试，所以我做了，看看这里的例子：
http://codepen.io/Edo_B/pen/cLbrt
http://codepen.io/Edo_B/pen/cLbrt
Using:
使用：
- HW Accelerated CSS filters
- JS for class assigning and arrow key events
- Images CSS Clip property
- 硬件加速 CSS 过滤器
- 用于类分配和箭头键事件的 JS
- 图像 CSS 剪辑属性
That's it.
就是这样。
I also believe this could be done dynamically for any screen if using canvas to copy the current dom and blurring it.
我也相信这可以在任何屏幕上动态完成，如果使用画布复制当前 dom 并对其进行模糊处理。
回答by wle8300
This should be coming browsers in the future as a CSS filter called backdrop-filter. There's virtually no support for it at all currently. For browser support see: http://caniuse.com/#feat=css-backdrop-filter
这应该是未来的浏览器作为 CSS 过滤器称为backdrop-filter. 目前几乎没有任何支持。有关浏览器支持，请参阅：http: //caniuse.com/#feat=css-backdrop-filter
This CSS filter will do the frosted glass without any funny business, or hacks. It'll just do it.
这个 CSS 过滤器将在没有任何有趣的业务或黑客的情况下做磨砂玻璃。它只会做。
Someone recorded a demo of it on Vine, and it looks really good. They were using Safari nightly to get access to the CSS filter. https://vine.co/v/OxmjlxdxKxl
有人在 Vine 上录制了它的演示，看起来非常好。他们每晚都使用 Safari 来访问 CSS 过滤器。https://vine.co/v/OxmjlxdxKxl
回答by Humer IT
Just put the same image (or parts of it) with opacity .9 a few pixels left/right/up/down - voilà
只需将不透明度为 0.9 的相同图像（或其中的一部分）向左/向右/向上/向下放置几个像素 - 瞧
回答by Vladimir Jovanovi?
Some browsers support the new CSS property backdrop-filter. This property enables you to add a "frosted glass-like" effect on an element without using the pseudo classes.
一些浏览器支持新的 CSS 属性backdrop-filter。此属性使您可以在不使用伪类的情况下在元素上添加“类似磨砂玻璃”的效果。
Example:
例子：
element {
background: rgba(255, 255, 255, .5);
backdrop-filter: blur(10px);
}
https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
回答by bcbrian
First of all the OP states that the background scrolls. None of the available answers really allow scrolling. Based on how html is set up it is impossible. But with the use of famous/angular one can have multiple rendering engines to achieve this affect. I have it constructed here.
首先，OP 声明背景滚动。没有一个可用的答案真的允许滚动。根据 html 的设置方式，这是不可能的。但是通过使用著名/角度，可以有多个渲染引擎来实现这种效果。我在这里建造了它。
The idea behind it is two renderings of the site. One is the header version which is blurred. The other is the body. I used Famous/Angular and use templating to render the template in the head and body. The header needs an offset for the height of the header so that things match up. I will be having actual code posted soon here and on the site.
它背后的想法是网站的两个效果图。一种是模糊的标题版本。另一个是身体。我使用 Famous/Angular 并使用模板在头部和身体中渲染模板。标题需要标题高度的偏移量，以便匹配。我将很快在这里和网站上发布实际代码。
