我想创建一个固定在一个位置的div 并使其半透明 - 使其后面的内容部分可见和模糊。我正在寻找的样式类似于Apple website 中“查看全部”缩略图的div。
我唯一能做的就是调整opacity: 0.9，但我不能模糊div下的内容。
注意：div 位置固定，背景滚动。 scolls 的背景是文字和照片的混合。
【问题讨论】：
标签： html css image-processing transparency css-filters
一些浏览器支持新的 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
【讨论】：
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.
供将来参考here is the compatibility table for CSS filter。 Firefox 似乎在 v35+ 中获得了该功能，而 IE11 似乎没有任何兼容性。
另一种方法是使用 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>
您将获得最高的浏览器与 javascript 的兼容性，但通常性能最慢并增加了 js 的复杂性。
【讨论】：
blur 可通过filter 获得。
这应该会在未来作为名为@987654323@ 的 CSS 过滤器出现在浏览器中。目前几乎没有任何支持。浏览器支持见：http://caniuse.com/#feat=css-backdrop-filter
这个 CSS 过滤器可以在没有任何有趣的事情或黑客的情况下处理磨砂玻璃。它会做的。
有人在 Vine 上录制了它的演示，看起来确实不错。他们每晚都使用 Safari 来访问 CSS 过滤器。 https://vine.co/v/OxmjlxdxKxl
【讨论】：
您可以使用 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
【讨论】：
-moz-filter : blur(5px);和-ms-filter: blur(5px);developer.mozilla.org/en-US/docs/Web/CSS/filter
首先，OP 声明背景滚动。没有一个可用的答案真的允许滚动。根据 html 的设置方式，这是不可能的。但是使用着名/角度可以有多个渲染引擎来实现这种效果。我已经构建了here。
其背后的想法是网站的两个效果图。一个是模糊的标题版本。另一个是身体。我使用 Famous/Angular 并使用模板在头部和身体中渲染模板。标头需要一个标头高度的偏移量，以便匹配。我很快就会在这里和网站上发布实际代码。
【讨论】：
只需将不透明度为 0.9 的相同图像（或部分图像）向左/右/上/下几个像素放置 - 瞧
【讨论】：
你让我想尝试，所以我做了，看看这里的例子：
http://codepen.io/Edo_B/pen/cLbrt
使用：
就是这样。
如果使用画布复制当前的 dom 并对其进行模糊处理，我也相信这可以在任何屏幕上动态完成。
【讨论】：