CSS backdrop-filter简介与苹果iOS毛玻璃效果

前端 · devil · 于 6个月前 发布 · 221 次阅读

有人说backdrop-filter和filter的语法类似。错!不是类似,是一模一样,如出一辙,毫无二致。

看下面的对比表:

backdrop-filterfilter
backdrop-filter: none;backdrop-filter: none;
backdrop-filter: url(zxx.svg#filter);filter: url(zxx.svg#filter);
backdrop-filter: blur(2px);filter: blur(2px);
backdrop-filter: brightness(60%);filter: brightness(60%);
backdrop-filter: contrast(40%);filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);filter: hue-rotate(120deg);
backdrop-filter: invert(70%);filter: invert(70%);
backdrop-filter: opacity(20%);filter: opacity(20%);
backdrop-filter: sepia(90%);filter: sepia(90%);
backdrop-filter: saturate(80%);filter: saturate(80%);

backdrop-filter和filter区别

backdrop-filter是让当前元素所在区域后面的内容模糊灰度或高亮之类,要想看到效果,需要元素本身半透明或者完全透明;而filter是让当前元素自身模糊灰度或高亮之类。

弹窗毛玻璃效果

dialog {
    -webkit-backdrop-filter: blur(5px);	
    backdrop-filter: blur(5px);	
}

参考链接

https://www.zhangxinxu.com/wordpress/2019/11/css-backdrop-filter/?from=timeline&isappinstalled=0

共收到 0 条回复
没有找到数据。
添加回复 (需要登录)
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册