首页 > 其他 > 详细

毛玻璃效果 |

时间:2021-09-15 15:45:22      阅读:11      评论:0      收藏:0      [点我收藏+]

filter: blur 方法,给元素添加了一个 ::before 伪类设置 blur 方法并将其置于底层实现毛玻璃效果。

.glass-by-filter {
  z-index: 1;
  box-sizing: border-box;
  position: relative;
}
.glass-by-filter::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  background: inherit;
  filter: blur(10px);
}

backdrop-filter: blur 直接在元素上添加 blur 方法实现毛玻璃效果

.glass-by-backdrop-filter {
  backdrop-filter: blur(10px);
}

实现效果如下图所示(左:filter、右:backdrop-filter):

技术分享图片

 

毛玻璃效果 |

原文:https://www.cnblogs.com/111wdh/p/15266051.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!