css实现毛玻璃效果

最新推荐文章于 2025-06-24 22:12:53 发布

丢了小熊o

最新推荐文章于 2025-06-24 22:12:53 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css html css3

(´▽`)ﾉ

本文链接：https://blog.csdn.net/w1311004532/article/details/128062363

css 专栏收录该内容

6 篇文章

订阅专栏

实现毛玻璃重点是利用filter属性的blur。原理是，可以给一个基础盒子的伪元素设置毛玻璃滤镜，再给伪元素设置背景图，让伪元素完全覆盖在这个基础盒子之上。

代码：


<template>
  <div class="high-quality">
  </div>
</template>


<style scoped lang="less">
.high-quality{
 position: relative;
  width:100%;
  height: 175px;
  padding:14px;
  display: flex;
  border-radius: 10px;
  overflow: hidden; //多余的毛玻璃部分隐藏
}
.high-quality:before{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index:1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: '';
  display: inline-block;
  background: url('https://img2.baidu.com/it/u=2241564326,399361128&fm=253&fmt=auto&app=120&f=JPEG?w=300&h=300') no-repeat;
  background-size:102% ;
  background-position: center center;
  border-radius: 10px;
  filter: blur(20px); //增加毛玻璃
}
</style>

效果：