CSS实现背景图局部模糊

娜娜啊吖

已于 2022-07-12 14:09:32 修改

阅读量905

点赞数 5

分类专栏： CSS 布局文章标签： css

于 2022-04-15 13:58:42 首次发布

本文链接：https://blog.csdn.net/pqn_cc/article/details/124193291

版权

CSS 布局专栏收录该内容

2 篇文章 0 订阅

订阅专栏

利用backdrop-filter实现

  <title>Css实现背景局部模糊</title>
    <style>
      .background {
        width: 500px;
        height: 400px;
        background: url(https://pic2.zhimg.com/v2-3f5ddc2367c78d252d1a963843100c1e_r.jpg?source=1940ef5c);
        background-size: 100% 100%;
        overflow: hidden;
      }
      .card {
        width: 200px;
        height: 200px;
        position: relative;
        border: 1px solid #000;
        color: white;
        left: 50px;
        top: 20px;
        backdrop-filter: blur(8px);
        background-color: rgba(0, 0, 0, 0.3);
      }
    </style>
  </head>
  <body>
    <div class="background">
      <div class="card"></div>
    </div>
  </body>