您可以使用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
0
我想创建一个固定在一个位置的
div
,并使其半透明-使它后面的内容部分可见和模糊。我要寻找的样式类似于Apple网站中 “查看全部”缩略图的div
。我唯一能做的就是调整
opacity: 0.9
但是我不能模糊div
下的内容。注意:
div
具有固定位置,并且背景滚动。错综复杂的背景是文字和照片的混合。