CSS3 毛玻璃效果

先上效果图：

屏幕快照 2020-01-02 下午5.28.13.png

1. html部分

  

    

      

        

        

        

        
五点半了，雨没有停的意味
        
我回头看看你的照片，与你又一次对视
        
注视我的不是此刻的你，不是你的少年就是你的暮年
        
我走过的这部分你不在
        
雨打在香樟树上，碎为水，落下来
        
雨打在瓦上，碎为水，落下来
        
雨打在池塘上，碎为石头，落下去
        
我关门的时候，又看了看面前的公路
        
直到夜幕落下，把雨都包裹起来
        
也不见一个人
        
——《你那里下雨了吗》
      
    
  

2.css部分

 .login_images {
  width: 100%;
  height: 100vh;
  background: url("/static/images/login.jpg") no-repeat;
  background-size: cover;
  background-position: center center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.testView {
  width: 500px;
  height: 800px;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(20px);
}

关键在 backdrop-filter: blur(20px);这个地方。