如何使用CSS创建磨砂玻璃效果?
image-processing
5
0

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

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

注意: div具有固定位置,并且背景滚动。错综复杂的背景是文字和照片的混合。

参考资料:
Stack Overflow
收藏
评论
共 4 个回答
高赞 时间 活跃

您可以使用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 CSS模糊技术

收藏
评论

的CSS

CSS 3具有模糊滤镜( 仅适用于2014年11月的webkit ):

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

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

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

在此处查看有关模糊和其他滤镜的一些不错的演示。

webkit CSS过滤器模糊示例

供将来参考, 这里是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演示

Java脚本

您将获得与javascript最高的浏览器兼容性,但通常是最慢的性能和js复杂性的增加。

收藏
评论

您让我想尝试一下,所以我做了一下,在这里查看示例:

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

使用:

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

而已。

我还相信,如果使用画布复制当前dom并使它模糊,则可以在任何屏幕上动态完成此操作。

收藏
评论

作为CSS过滤器( backdrop-filter器),将来应该会出现在浏览器中。目前几乎没有任何支持。有关浏览器的支持,请参见: http : //caniuse.com/#feat=css-backdrop-filter

这个CSS过滤器可以完成毛玻璃,而不会产生任何有趣的事情或骇客。会做的。

有人在Vine上录制了一个演示,它看起来真的很棒。他们每晚使用Safari来访问CSS过滤器。 https://vine.co/v/OxmjlxdxKxl

收藏
评论
新手导航
  • 社区规范
  • 提出问题
  • 进行投票
  • 个人资料
  • 优化问题
  • 回答问题

关于我们

常见问题

内容许可

联系我们

@2020 AskGo
京ICP备20001863号