引言
最近看到有一种磨砂玻璃背景效果很好看，自己简单制作了一个美杜莎女王小卡片，效果如下：
backdrop-filter: blur(10px);通过设置背景幕布的模糊程度，结合背景图片，实现磨砂玻璃效果
案例代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>美杜莎卡片</title>
</head>
<body><div class="player"><img src="https://c-ssl.duitang.com/uploads/blog/202111/29/20211129135219_5cf68.jpg" alt=""><div class="name">美杜莎</div></div>
</body>
<style>.player {width: 300px;height: 450px;/* 人物卡片居中 */margin: 100px auto;position: relative;/* 添加卡片阴影 */box-shadow: 0 0 10px 2px black;}.player img {/* 图片按原先比例放置，多余部分隐藏 */object-fit: cover;width: 100%;height: 100%;}.player .name {position: absolute;bottom: 0%;display: flex;/* 字体水平居中，垂直居中 */justify-content: center;align-items: center;font-size: 48px;/* 设置字体间距 */letter-spacing: 1rem;color: #ff8080;width: 100%;height: 15%;/* 设置磨砂玻璃效果 */backdrop-filter: blur(10px);}
</style>
</html>