实现图片的毛玻璃效果

## 背景我又双叒叕来摸鱼啦！！今天又双叒叕是做需求，发现产品给了一个缩略图排列起来的列表（虽然列表里只给了一个排列项，其他需要脑补）然鹅我发现！**想象总是美好的，然而现实是非常骨感的！** *什么是毛玻璃效果？* >毛玻璃效果（Glassmorphism）是目前非常流行的设计新趋势，你可以在 Dribbble 等网站上看到毛玻璃效果，甚至像 Apple 和 Microsoft 这样的大公司也在使用它。 >基本上，它的主要特征就是半透明的背景，以及阴影和边框。 **FBI Warning!** 下面开始，我要给大家画画了！！！希望可以完全展示出我们产品给的原型图。 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/84df2e6ac35f455da1fcd30683f8a67c~tplv-k3u1fbpfcp-zoom-1.image) 就类似下面这种～～ ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f6284f594d814a8e8c0a08b3f91fe21b~tplv-k3u1fbpfcp-zoom-1.image) 在页面中的图片缩略图列表，每张图片的大小，尺寸，宽高比一定不是一样的。。这样就会出现下面这样形式 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/91476e0cd9324ed28a1625bc8afe9d4f~tplv-k3u1fbpfcp-zoom-1.image) ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/547a11d1e71447a5817047ec04af98dc~tplv-k3u1fbpfcp-zoom-1.image) 这样的出现了，那么一定是左右，上下会有一定的留白，留黑更不好看了吧～ ## 效果展示 *图片用的 Ant Design 的 Image 组件的官方示例图片，侵权请联系我删除.* So... 在我的印象中，好像有一种效果，背景显示当前图片的虚化图，实际的图片显示在整个盒子的中间就好，类似我们今天实现的这种 ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/307d8917b11c4de5a920f0c2e38f136e~tplv-k3u1fbpfcp-zoom-1.image) ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/10ca5530ceb34783a061ac0439be8ef6~tplv-k3u1fbpfcp-zoom-1.image) ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8d3706bf1f3a4d6897ed2dd75fc43353~tplv-k3u1fbpfcp-zoom-1.image) 怎么样？是不是效果不错？？要比留白留黑好看多了吧～～ ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e499d747c68f4b94ac9099761b7c025d~tplv-k3u1fbpfcp-zoom-1.image) ## 代码开撸首先写个 HTML 模版代码，用来挂载我们的图片和样式 ```html 实现图片的毛玻璃效果

``` ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4f0d653930a940ed8916e962814806b7~tplv-k3u1fbpfcp-zoom-1.image) 主要是 CSS 部分，我们这次使用 `filter: blur()` 来实现背景图的虚化 ```html ``` ![image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a5cc183526e14a64a019ab83ca559087~tplv-k3u1fbpfcp-zoom-1.image) 这样就实现了我们的毛玻璃图片缩略图预览的效果了，看起来非常赞！不要忘记给父元素设置 `overflow: hidden;` 否则虚化的阴影和边框会溢出，影响其他元素。我们使用的是 `filter: blur()` 来实现的，这个样式在兼容性上还是可以的，目前主流的毛玻璃效果的网站都在使用 `backdrop-filter: blur();` 来实现。下面是我在寻找遇到的问题的时候，查询到的相关文档，可以看看，效果十分的赞、养眼。相信继扁平化效果之后，就是毛玻璃效果了 [什么是毛玻璃效果（Glassmorphism）？仅使用 HTML 和 CSS 来实现](https://chinese.freecodecamp.org/news/glassmorphism-design-effect-with-html-css/) [Glass UI](https://ui.glass/) [Glassmorphism in user interfaces](https://uxdesign.cc/glassmorphism-in-user-interfaces-1f39bb1308c9) > 摸鱼不易啊！！！为了给大家看看我最新的摸鱼效果，同时排期的时间也在缩短。。如果对你哪怕有那么一丢丢的帮助，点个赞再走吧～