背景图搭配毛玻璃效果处理白边问题背景图搭配毛玻璃效果处理图片白边问题。背景图搭配毛玻璃效果处理图片白边问题。背景图搭




<!DOCTYPE html>
<html>
  <head>
    <title>实现图片的毛玻璃效果</title>
  </head>

  <style>
    .background {
      width: 460px;
      height: 200px;
      overflow: hidden;
    }
  
    .background-content {
      width: 460px;
      height: 100%;
      position: relative;
      /* 让图片居中显示 */
      display: flex;
      justify-content: center;
      align-items: center;
    }
  
    .background-content-image {
      position: absolute;
      /* 重点，不能让背景大过于展示的图片 */
      z-index: -1;
      width: 460px;
      height: 100%;
      filter: blur(8px);  
      background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-34e9367e770088def9c31d2b26ab654e_1440w.jpg%3Fsource%3D172ae18b&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668307874&t=b98770e4be2eaae74ab64c79f6f8a119);
      background-size: 100%;
      background-position: center;
      background-repeat: no-repeat;
    }
  
    img {
      max-height: 100%;
      width: 70%;
    }
  </style>
  

  
  <body>
    <div class="background">
      <div class="background-content">
        <div class="background-content-image"></div>
        <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-34e9367e770088def9c31d2b26ab654e_1440w.jpg%3Fsource%3D172ae18b&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668307874&t=b98770e4be2eaae74ab64c79f6f8a119"
          alt="测试图片"
        />
      </div>
    </div>
  </body>
</html>

效果图：