使用rgba或hsla可在CSS渐变中实现透明效果，如background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))；结合多重背景可叠加图片与渐变遮罩，提升文字可读性；应避免使用opacity以免影响内容透明度，推荐优先采用rgba控制背景透明。
在CSS中，背景渐变和透明度可以结合使用，实现视觉上更丰富的效果。关键在于理解如何正确设置颜色的透明度，同时不影响其他元素的显示。
使用rgba或hsla设置渐变颜色透明度
如果你想让渐变本身带有透明效果，可以在定义渐变色时使用 rgba 或 hsla 颜色值，它们支持设置透明度（alpha通道）。
例如，创建一个从半透明黑色到完全透明的线性渐变：
对应的CSS代码：
立即学习“前端免费学习笔记（深入）”；
background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
将渐变与透明背景用于叠加效果
这种组合常用于图片上方叠加一层渐变遮罩，使文字更清晰可读。
示例：在图片背景上叠加一个从黑到透明的渐变：
文字内容
CSS写法：
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent), url('image.jpg');
background-size: cover;
这里使用了多重背景，先写渐变层，再写图片层，浏览器会按顺序叠加显示。
注意opacity与背景透明的区别
不要混淆 background 的透明和元素整体的 opacity。
如果使用 opacity: 0.5;，整个元素及其内容都会变透明，而使用 rgba() 只会让背景颜色或渐变透明，文字保持清晰。
推荐优先使用 rgba 控制背景透明度，避免影响内容可读性。
