CSS3 毛玻璃效果

先上效果图:

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

1. html部分

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

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);这个地方。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 原来真的可以忘记,时间就是最好的解药。真的可以看开很多事情,时间真的是一件很可怕的东西,带走了我所有的开心,同时顺...
    辣条配泡芙阅读 109评论 0 0
  • 网络请求, 先想到的是dart官方维护的http库. 由于我们项目组网络请求都采用的表单结构, http貌似不支持...
    壹点微尘阅读 13,109评论 1 5
  • 在南方以北,在北方以南。 南方的秋有点寡淡,北方的秋过于清寒,不南不北的汉中的秋,才是季节的样板。...
    凡人小梦阅读 1,901评论 4 5