linear-gradient做透明蒙版时背景没变暗，是因为未使用带alpha通道的颜色（如rgba或带透明度的十六进制），而默认颜色如black或#000无透明度，导致渐变失效；必须用rgba(0,0,0,0.8)到rgba(0,0,0,0)等显式透明色，并确保元素有定位和正确层级。
linear-gradient做透明蒙版时，为什么背景没变暗？
因为linear-gradient默认用的是颜色值（如#000、black），这些不带透明度的颜色在渲染时完全不透光——哪怕你写了“从黑到透明”，如果没显式声明透明通道，浏览器就当它是纯黑。真正起作用的是带 alpha 的颜色表示法。
- 必须用
rgba(0, 0, 0, 1)到rgba(0, 0, 0, 0)，或十六进制带 alpha 形式（如#00000000） - 别用
black→transparent，虽然语义对，但部分旧浏览器（如 Safari 13.1 之前）对transparent在渐变中支持不稳定 - 蒙版要盖在内容上，得确保元素有定位（
position: relative/absolute）且层级正确（z-index）
CSS里写linear-gradient透明蒙版的正确写法
核心是把渐变作为 background-image，叠加在目标元素上，并控制尺寸和位置。最常用的是覆盖整个容器底部向上渐变，模拟“内容可读、底部被遮”的效果。
- 基础写法：
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)); - 方向关键词要写对：
to top表示起点在底部、终点在顶部；若写成bottom to top会报错 - 记得加
background-size: 100% 100%;和background-repeat: no-repeat;，否则渐变可能平铺或缩放异常 - 如果容器高度不固定（比如文字流式撑开），建议配合
background-attachment: local;防止滚动时蒙版错位
透明度渐变蒙版在不同场景下的参数调整
不是所有情况都适合“全黑到全透明”。实际项目里，蒙版强度、过渡长度、方向都要按内容动态调。
- 图片封面标题区：用短距离强衰减，比如
linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.9) 70%, rgba(0,0,0,0.9) 100%) - 卡片悬停浮层：需要柔和入口，改用
to top+ 更长过渡（0% → 100%跨 80vh），避免突兀 - 深色模式兼容：避免硬写
rgba(0,0,0,...)，可换为color-mix(in srgb, black 80%, transparent)（新标准，仅 Chrome 111+ 支持） - 性能提示：渐变本身无重绘开销，但如果蒙版层叠在大量动画元素上，建议加
will-change: background;防止合成层频繁切换
常见错误：蒙版“看不见”或“全黑一片”
这两种现象本质都是颜色通道没生效，但原因不同。
-
“看不见”：用了
transparent但父容器没设置background-color或背景图，导致蒙版下是白色底，视觉无变化；检查是否漏了底层内容 -
“全黑一片”：写了
rgba(0,0,0,1)→rgba(0,0,0,0.9)，后段透明度还是太高，人眼分辨不出差异；把终点值降到0.1甚至0再试 - 调试技巧：临时把蒙版改成
linear-gradient(red, blue)，确认是否渲染出来；再换回 rgba - 兼容性雷区：IE 完全不支持 rgba 渐变，必须用 SVG 滤镜或伪元素 fallback
alpha 值的小数点后一位差异，在低对比度区域就可能让蒙版失效；调的时候别只看设计稿，一定要在真机、不同亮度屏幕下过一遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
