CSS实现背景图局部模糊

2024-11-23 来源：个人技术集锦

利用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>

效果图

显示全文

全部栏目

CSS实现背景图局部模糊