CSS渐变实现透明到有色需用rgba()控制alpha值，线性渐变常用to bottom方向，三段式（0%、50%、100%）过渡更自然，径向渐变适用于圆形遮罩，叠加时需配合absolute定位与relative父容器。
CSS 渐变从透明到有色，核心是用 rgba() 定义颜色的透明度，让起始色的 alpha 值为 0（完全透明），终点色的 alpha 值为 1（不透明）或指定不透明度。
基础写法：线性渐变（透明 → 纯色）
最常用的是从上到下、左到右等方向的线性渐变。关键是把起点设为 rgba(0,0,0,0) 或任意色值但 alpha=0，终点设为带 alpha=1 的实色：
background: linear-gradient(to bottom, rgba(255, 100, 50, 0), rgba(255, 100, 50, 1));
这段代码实现从顶部完全透明，到底部橙红色（#ff6432）的平滑过渡。
更自然的写法：透明 → 半透 → 实色（三段控制）
只用两端容易显得生硬。加入中间色（比如 alpha=0.3），可让过渡更柔和：
立即学习“前端免费学习笔记（深入）”；
-
rgba(255, 100, 50, 0)— 顶部完全透明 -
rgba(255, 100, 50, 0.3)— 中间轻度显现 -
rgba(255, 100, 50, 1)— 底部完全显色
对应 CSS：
background: linear-gradient(to bottom, rgba(255, 100, 50, 0) 0%, rgba(255, 100, 50, 0.3) 50%, rgba(255, 100, 50, 1) 100%);
配合背景图/内容时的关键点
透明渐变常用于遮罩文字或图片，需注意：
- 渐变层要叠加在内容上方（如用伪元素
::before或额外 div） - 确保父容器有
position: relative，渐变层设position: absolute并铺满 - 文字颜色建议选高对比度（如白色），避免被半透区域“吃掉”
径向渐变也支持透明过渡
适合圆形遮罩、焦点强调等场景：
background: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 70%, rgba(0, 0, 0, 1) 100%);
这个例子是从中心透明向外逐渐变黑，常用于模态框阴影或图像聚焦效果。
