backdrop-filter和filter属性效果对比示意实例页面

展示

代码

• HTML：

  <h4>filter实现的模糊</h4>
  <div class="container filter">
      <img src="1.jpg" width="256">
  </div>
  <h4>backdrop-filter实现的模糊</h4>
  <div class="container backdrop-filter">
      <img src="1.jpg" width="256">
  </div>

• CSS：

  .container {
      width: 256px; height: 192px;
      margin: auto;
      position: relative;
      overflow: hidden;
  }
  .filter img {
      filter: blur(5px);
  }
  .backdrop-filter::before {
      content: "";
      position: absolute;
      left: 0; 
      width: inherit; height: inherit;
      -webkit-backdrop-filter: blur(5px);
      backdrop-filter: blur(5px);
  }