【CSS】毛玻璃特效

.bg-img {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow:hidden;
  img {
    transform: scale(1.3);
    width: 100%;
    filter: blur(20px);
  }
}

 

1、毛玻璃特效使用filter: blur(20px);

 

 

2、特效会使图片的边界很模糊，所以先固定在一个div.bg-img，使用transform: scale(1.3); 时显示区的内容边界清晰（特效的区域大小可以根据自己需要定义，这里只展示处理的方法）