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-indexCSS里写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; 防止合成层频繁切换常见错误蒙版“看不见”或“全黑一片”这两种现象本质都是颜色通道没生效但原因不同。 橙篇 百度文库发布的一款综合性AI创作工具