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

最新推荐文章于 2024-08-08 11:48:45 发布

ZT_KEBEI

最新推荐文章于 2024-08-08 11:48:45 发布

阅读量171

点赞数

分类专栏：前端 CSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/ZT_KEBEI/article/details/127316393

版权

前端同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

<!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>