个人网站毛玻璃效果实现：CSS视觉详解
发布时间：2026-04-10 | 分类：CSS教程 | 阅读时长：10分钟
👀 阅读：0
前言
毛玻璃效果（Glassmorphism）是现代UI设计中非常流行的视觉风格，通过半透明背景、模糊效果和细边框，打造出层次感强、质感高级的界面。本文详细讲解毛玻璃效果的CSS实现，配合背景图和雨滴动画，打造出氛围感十足的个人网站视觉风格。
一、核心CSS属性
毛玻璃效果的核心是3个CSS属性：
backdrop-filter: blur()：背景模糊（核心）background: rgba()：半透明背景border: 1px solid rgba()：半透明边框
这3个属性配合使用，就能实现基础的毛玻璃效果。
二、基础毛玻璃卡片实现
直接上代码，最简单的毛玻璃卡片：
.glass-card {
/* 半透明背景 */
background: rgba(255, 255, 255, 0.12);
/* 背景模糊（毛玻璃核心） */
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px); /* 兼容Safari */
/* 半透明边框 */
border: 1px solid rgba(255, 255, 255, 0.2);
/* 圆角 */
border-radius: 16px;
/* 内边距 */
padding: 24px;
}
参数说明：
rgba(255,255,255,0.12)：最后一个值是透明度，0-1之间，越大越不透明blur(12px)：模糊半径，越大越模糊，通常8-16px效果最好-webkit-backdrop-filter：兼容Safari浏览器，必须加上
三、进阶：背景图+遮罩+雨滴动画
为了让毛玻璃效果更有氛围感，我们加上背景图、暗色遮罩和雨滴动画：
1. 背景图+遮罩
body {
/* 背景图 */
background: url('bg.jpg') center/cover fixed;
/* 相对定位，给遮罩和动画用 */
position: relative;
/* 最小高度占满屏幕 */
min-height: 100vh;
}
/* 暗色遮罩，让文字更清晰 */
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.65);
z-index: 0;
}
2. 雨滴动画（纯CSS实现）
.rain {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none; /* 不阻挡点击 */
z-index: 1;
/* 径向渐变模拟雨滴 */
background-image:
radial-gradient(2px 2px at 20% 30%, #fff, transparent),
radial-gradient(2px 2px at 60% 70%, #fff, transparent);
background-size: 200px 200px;
/* 动画：无限循环 */
animation: rain 2s linear infinite;
opacity: 0.3;
}
@keyframes rain {
0% { background-position: 0 0, 0 0; }
100% { background-position: 200px 400px, 200px 400px; }
}
四、层级关系（非常重要）
毛玻璃效果的层级关系必须正确，否则会出现遮挡问题：
body：最底层，放背景图.overlay：第二层，暗色遮罩.rain：第三层，雨滴动画.container：第四层，内容容器（毛玻璃卡片）
通过 z-index 控制层级，确保内容在最上层，不被遮罩和动画遮挡。
五、兼容性说明
backdrop-filter 兼容所有现代浏览器（Chrome、Firefox、Safari、Edge）- IE浏览器完全不支持，但现在几乎没人用IE了
- 必须加上
-webkit-backdrop-filter 兼容Safari
写在最后
毛玻璃效果的实现非常简单，核心就是3个CSS属性，配合背景图和动画，就能打造出高级感十足的个人网站。新手可以先从基础毛玻璃卡片练手，熟悉后再逐步添加动画和交互，慢慢完善自己的网站视觉风格。