如何使用 CSS 创建磨砂玻璃效果？

Question

我想创建一个固定在一个位置的div并使其半透明 - 使其后面的内容部分可见和模糊。 我正在寻找的样式类似于Apple 网站中“查看全部”缩略图的div 。

我唯一能做的就是调整opacity: 0.9但我不能模糊div下的内容。

注意： div位置固定，背景滚动。 scolls 的背景是文本和照片的混合。

Answer 1

CSS

CSS 3 有一个模糊过滤器（目前只有 webkit 2014 年 11 月）：

-webkit-filter: blur(3px); /*chrome (android), safari (ios), opera*/

IE 4-9 支持非标准过滤器

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3')

在此处查看模糊和其他过滤器的一些不错的演示。

为了将来参考，这里是 CSS filter 的兼容性表。 Firefox 似乎在 v35+ 中获得了该功能，而即使 IE11 似乎也没有任何兼容性。

SVG

另一种方法是使用 svg（对于 IE9 及更高版本是安全的）：

filter: url(blur.svg#blur);

SVG：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
   <filter id="blur">
       <feGaussianBlur stdDeviation="3" />
   </filter>
</svg> 

jsFiddle 演示

Javascript

您将实现与 javascript 的最高浏览器兼容性，但通常是最慢的性能并增加了您的 js 的复杂性。

• http://www.blurjs.com/（jquery插件， canvas 解决方案，IE9+，FF，Chrome 支持）
• http://nbartlomiej.github.io/foggy/（jquery插件 IE8+、FF、Chrome 支持）

Answer 2

您可以使用 CSS 图像过滤器。

-webkit-filter: blur(2px);
filter        : blur(2px);

有关 CSS 图像过滤器的更多信息：

• http://techstream.org/Web-Design/CSS3-Image-Filters
• http://html5-demos.appspot.com/static/css/filters/index.html

演示： JSFIDDLE

---

但实际上，他们使用的是经过预处理的 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>

演示： JSFIDDLE

Answer 3

你让我想尝试，所以我做了，看看这里的例子：

http://codepen.io/Edo_B/pen/cLbrt

使用：

1. 硬件加速 CSS 过滤器
2. 用于类分配和箭头键事件的 JS
3. 图像 CSS 剪辑属性

就是这样。

我也相信这可以在任何屏幕上动态完成，如果使用画布复制当前 dom 并对其进行模糊处理。

Answer 4

这应该是未来的浏览器作为 CSS 过滤器，称为backdrop-filter 。 目前几乎没有任何支持。 有关浏览器支持，请参阅： http : //caniuse.com/#feat=css-backdrop-filter

这个 CSS 过滤器将在没有任何有趣的业务或黑客的情况下做磨砂玻璃。 它只会做。

有人在 Vine 上录制了它的演示，看起来非常好。 他们每晚都使用 Safari 来访问 CSS 过滤器。 https://vine.co/v/OxmjlxdxKxl

Answer 5

只需将不透明度为 0.9 的相同图像（或其中的一部分）向左/向右/向上/向下放置几个像素 - 瞧

Answer 6

一些浏览器支持新的 CSS 属性backdrop-filter 。 此属性使您可以在不使用伪类的情况下在元素上添加“类似磨砂玻璃”的效果。

例子：

element {
    background: rgba(255, 255, 255, .5);
    backdrop-filter: blur(10px);
}

https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

Answer 7

首先，OP 声明背景滚动。 没有一个可用的答案真的允许滚动。 根据 html 的设置方式，这是不可能的。 但是通过使用著名/角度，可以有多个渲染引擎来实现这种效果。 我在这里建造了它。

它背后的想法是网站的两个效果图。 一种是模糊的标题版本。 另一个是身体。 我使用 Famous/Angular 并使用模板在头部和身体中渲染模板。 标题需要标题高度的偏移量，以便匹配。 我将很快在这里和网站上发布实际代码。