毛玻璃效果（Glassmorphism）的简单实现

什么是毛玻璃效果？

毛玻璃效果（Glassmorphism）是目前非常流行的设计新趋势，它的主要特征就是半透明的背景，以及阴影和边框。

在实际开发工作中，我们经常遇到如下页面布局。原谅我粗糙的画工~

在页面中的图片缩略图列表，每张图片的大小，尺寸，宽高比一定不是一样的。这样就会出现下面这样形式：

这样的出现了，那么一定是左右，上下会有一定的留白，留黑更不好看了吧～

效果展示

图片用的 Ant Design 的 Image 组件的官方示例图片，侵权请联系我删除.

So… 在我的印象中，好像有一种效果，背景显示当前图片的虚化图，实际的图片显示在整个盒子的中间就好，类似我们今天实现的这种。

效果看起来好很多了吧~

代码开撸

首先写个 HTML 模版代码，用来挂载我们的图片和样式。

<!DOCTYPE html>
<html>
  <head>
    <title>实现图片的毛玻璃效果</title>
  </head>
  <body>
    <div class="background">
      <div class="background-content">
        <div class="background-content-image"></div>
        <img
          src="https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp"
          alt="测试图片"
        />
      </div>
    </div>
  </body>
</html>

主要是 CSS 部分，我们这次使用 filter: blur() 来实现背景图的虚化。

  .background {
    width: 260px;
    height: 200px;
    overflow: hidden;
  }

  .background-content {
    width: 260px;
    height: 100%;
    position: relative;
    /* 让图片居中显示 */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .background-content-image {
    position: absolute;
    /* 重点，不能让背景大过于展示的图片 */
    z-index: -1;
    width: 260px;
    height: 100%;
    filter: blur(8px);
    background-image: url(https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
  }

  img {
    max-height: 100%;
  }

这样就实现了我们的毛玻璃图片缩略图预览的效果了，看起来非常赞！

不要忘记给父元素设置 overflow: hidden; 否则虚化的阴影和边框会溢出，影响其他元素。

我们使用的是 filter: blur() 来实现的，这个样式在兼容性上还是可以的，目前主流的毛玻璃效果的网站都在使用 backdrop-filter: blur(); 来实现。

参考文档：

什么是毛玻璃效果（Glassmorphism）？仅使用 HTML 和 CSS 来实现

Glass UI

文章版权归作者所有，未经允许请勿转载。

THE END