什么是毛玻璃效果?
毛玻璃效果(Glassmorphism)是目前非常流行的设计新趋势,它的主要特征就是半透明的背景,以及阴影和边框。
在实际开发工作中,我们经常遇到如下页面布局。原谅我粗糙的画工~
![图片[1] - 毛玻璃效果(Glassmorphism)的简单实现 - 君霖驿站](https://jurieo.com/wp-content/uploads/2021/12/image-893x1024.png)
在页面中的图片缩略图列表,每张图片的大小,尺寸,宽高比一定不是一样的。这样就会出现下面这样形式:
![图片[2] - 毛玻璃效果(Glassmorphism)的简单实现 - 君霖驿站](https://jurieo.com/wp-content/uploads/2021/12/image-1.png)
![图片[3] - 毛玻璃效果(Glassmorphism)的简单实现 - 君霖驿站](https://jurieo.com/wp-content/uploads/2021/12/image-2.png)
这样的出现了,那么一定是左右,上下会有一定的留白,留黑更不好看了吧~
效果展示
图片用的 Ant Design 的 Image 组件的官方示例图片,侵权请联系我删除.
So… 在我的印象中,好像有一种效果,背景显示当前图片的虚化图,实际的图片显示在整个盒子的中间就好,类似我们今天实现的这种。
![图片[4] - 毛玻璃效果(Glassmorphism)的简单实现 - 君霖驿站](https://jurieo.com/wp-content/uploads/2021/12/image-3.png)
![图片[5] - 毛玻璃效果(Glassmorphism)的简单实现 - 君霖驿站](https://jurieo.com/wp-content/uploads/2021/12/image-4.png)
效果看起来好很多了吧~
代码开撸
首先写个 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();
来实现。
参考文档:
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
喜欢就支持一下吧