CSS如何制作透明度渐变的蒙版_使用linear-gradient从黑色过渡到透明

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