美文网首页
css简单实现毛玻璃效果

css简单实现毛玻璃效果

作者: 郭_小青 | 来源:发表于2023-08-15 16:10 被阅读0次

有些时候设计师会让我们实现毛玻璃的效果,来达到遮罩或者视觉上的美化。比如这样:

一:在毛玻璃的实现过程中backdrop-filter:blur()就显得尤为重要了
image.png
.div{
  width: 600px;
  height: 300px;
  background: #ffffff5e; //切记:背景色增加一定的透明度
  backdrop-filter: blur(15px);
}

二:背景虚化属性filter:blur()
image.png

以上代码增加filter以后:

.div{
  width: 600px;
  height: 300px;
  background: #ffffff5e; //切记:背景色增加一定的透明度
  backdrop-filter: blur(15px);
  filter:blur(2px)
}

相关文章

网友评论

      本文标题:css简单实现毛玻璃效果

      本文链接:https://www.haomeiwen.com/subject/ilmhmdtx.html