Question

我想创建一个div固定在一个位置并使其半透明 - 使其背后的内容部分可见和模糊。我正在寻找的风格类似于Apple website中“查看所有”缩略图的div。

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

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

Answer 1

CSS

CSS 3有一个模糊过滤器（only webkit at the moment Nov 2014）：

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

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

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

See some nice demo for the blur and other filters here.

webkit CSS filter blur example

供将来参考here is the compatibility table for CSS filter。 Firefox似乎在v35 +中得到了这个功能，而IE11似乎没有任何兼容性。

SVG

另一种方法是使用svg（safe for basically IE9 and up）：

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 solution so IE9+, FF, Chrome support）
http://nbartlomiej.github.io/foggy/（jquery插件IE8 +，FF，Chrome支持）

Answer 2

您可以使用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

Answer 3

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

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

使用：

HW Accelerated CSS过滤器
用于课程分配和箭头键事件的JS
图片CSS剪辑属性

就是这样。

我也相信如果使用画布来复制当前的dom并使其模糊，这可以动态地为任何屏幕完成。

Answer 4

只需将相同的图像（或部分图像）放入不透明度.9左/右/上/下几个像素 - voilà

Answer 5

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

这个CSS过滤器可以做磨砂玻璃，没有任何有趣的业务，或黑客。它只会这样做。

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

Answer 6

某些浏览器支持新的CSS属性export DISPLAY=":0"。此属性使您可以在元素上添加“类似毛玻璃”的效果，而无需使用伪类。

示例：

backdrop-filter

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

Answer 7

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

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

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

7 个答案:

CSS

SVG

的Javascript