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

Question

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

htmlcssimage-processingtransparencycss-filters

12

我希望创建一个固定位置的div，并使其透明 - 使其后面的内容部分可见并模糊。我要找的样式类似于苹果网站中“查看全部”缩略图的div。我唯一能做的就是调整opacity: 0.9，但是我不能模糊放在

下面的内容。

注意：该

具有固定位置，而背景滚动。滚动的背景是文本和照片的混合物。

- user2463516

1

http://css-plus.com/2012/03/gaussian-blur/ - Joe Frambach

7个回答

8

您可以使用CSS图像滤镜。

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

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

演示：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

- Vitim.us

2

FF和IE目前不支持滤镜，因此没有-moz-filter: blur(5px);和-ms-filter: blur(5px);。https://developer.mozilla.org/en-US/docs/Web/CSS/filter - Patrick

我的div中的文本也会模糊，你有什么想法为什么会这样？ - eaglei22

2

这应该在未来作为CSS滤镜的一个叫做“backdrop-filter”的功能出现在浏览器中。目前几乎没有支持它的，有关浏览器支持情况请参见：http://caniuse.com/#feat=css-backdrop-filter 这个CSS滤镜将会制作磨砂玻璃而不需要任何诡异的操作或者技巧。它只是这么做。

有人在Vine上录制了一个演示视频，看起来非常好。他们使用Safari nightly获取了CSS滤镜的访问权限。https://vine.co/v/OxmjlxdxKxl

- wle8300

2

你让我想尝试一下，所以我试了一下，在这里查看示例：http://codepen.io/Edo_B/pen/cLbrt。

使用：

硬件加速CSS滤镜
JS用于类分配和箭头键事件
图像CSS剪辑属性

就是这样。

我还相信，如果使用画布复制当前dom并模糊它，这可以动态地针对任何屏幕完成。

- Edo Ben Shitrit

1

只需将相同的图像（或其部分）设置为不透明度0.9，向左/右/上/下移动几个像素-完成。

- Humer IT

1

一些浏览器支持新的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

- Vladimir Jovanović

-2

首先，OP表示背景会滚动。现有的答案中没有一个能够真正实现滚动。基于HTML的设置，这是不可能的。但是通过使用著名的Angular框架，可以使用多个渲染引擎来实现此效果。我已经在这里构建了链接。

它的理念是网站的两个渲染版本：一个是模糊的头部版本，另一个是主体。我使用Famous / Angular并使用模板在头部和主体上进行渲染。头部需要一个偏移量来匹配高度。我很快就会在这里和网站上发布实际代码。

- bcbrian

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Patrick · Accepted Answer

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')

这里有一些模糊和其他滤镜的不错演示。

webkit CSS filter blur example

以便日后参考，这是CSS滤镜兼容性表。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 Demo

Javascript

使用JavaScript可以实现最高的浏览器兼容性，但通常速度较慢，并增加了你的JS代码的复杂性。

http://www.blurjs.com/（jQuery插件，使用canvas技术，支持IE9+, Firefox, Chrome）
http://nbartlomiej.github.io/foggy/（jQuery插件，支持IE8+, FireFox和Chrome）