最直接方式是用伪元素叠加 linear-gradient 背景遮罩：图片包入 relative 定位容器，::before 设 absolute、100% 尺寸及 to bottom 渐变，RGBA alpha 必须用小数。
用 CSS linear-gradient 做图片渐变遮罩最直接
HTML5 本身不提供“渐变遮罩”这个功能，实际是靠 CSS 的 background-image 或 mask-image 配合 linear-gradient() 实现。最常用、兼容性最好（Chrome/Firefox/Safari/Edge 均支持）的方式是把渐变当背景层叠在图片上。
关键不是“HTML5 怎么写”，而是“怎么组合 HTML + CSS 才让遮罩生效”。图片本身用 <img>，遮罩用伪元素或额外 <div> 叠加，再用 linear-gradient(rgba(0,0,0,0.8), transparent) 控制透明度过渡。
- 渐变方向写成
to bottom（从上到下渐隐）比0deg更易读，也更符合常见设计意图 - RGBA 值里 alpha 通道必须明确设为小数（如
0.7），不能写70%，否则渐变会失效 - 如果图片是响应式（
width: 100%; height: auto），遮罩容器必须设position: relative，伪元素才好绝对定位覆盖
用 ::before 伪元素实现无侵入式遮罩
不用改 HTML 结构，只靠 CSS 就能给任意 <img> 加遮罩，前提是把图片包进一个容器（比如 <div class="img-container"><img src="..."></div>），然后对容器加伪元素。
这样做的好处是语义干净、JS 不用动 DOM，也方便复用类名。但要注意：伪元素默认不占文档流，必须显式设置 content: "" 和尺寸，否则看不到遮罩。
立即学习“前端免费学习笔记（深入）”；
-
.img-container { position: relative; display: inline-block; }—— 容器必须有定位上下文 .img-container::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent); }- 如果遮罩要响应鼠标悬停变化，直接加
.img-container:hover::before { opacity: 0.3; }即可，无需 JS
mask-image 方案虽新但兼容性差
真·遮罩（即按 Alpha 通道裁剪内容）要用 mask-image + linear-gradient，比如 mask-image: linear-gradient(to bottom, black, transparent)。但它在 Safari 15.4+ 才稳定支持，Chrome 要加 -webkit-mask-image 前缀，Firefox 目前完全不支持（截至 2024 年中）。
除非你只面向 Safari 用户，或者做实验性项目，否则不建议主用此方案。它和背景渐变的区别在于：前者是“挖洞”，后者是“盖层”；前者能做出镂空文字效果，后者只是叠加一层半透色块。
- 使用
mask-image时，渐变颜色只能用black/white/transparent，RGBA 无效 -
mask-mode: luminance是默认值，别手动设，否则旧版 Safari 会失效 - 调试时可临时加
mask-border: 1px solid red看遮罩范围（仅 Safari 支持）
图片模糊 + 渐变遮罩容易糊成一片
很多人想实现“毛玻璃+顶部渐隐”的效果，结果一加 filter: blur(8px)，遮罩就看不清了——因为 blur 会影响整个元素及其伪元素，导致渐变边缘发散失真。
正确做法是把图片和遮罩拆成两个独立图层：图片层负责模糊，遮罩层保持清晰，再用 z-index 叠在一起。这意味着不能用伪元素，得用真实 DOM 元素包裹。
- 结构示例：
<div class="glass-wrap"> <div class="glass-bg"><img src="..."></div> <div class="glass-mask"></div> </div>
-
.glass-bg { filter: blur(10px); }，.glass-mask { background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent); } - 两层都设
position: absolute，父容器position: relative控制堆叠
渐变遮罩看着简单，但一旦混入滤镜、响应式、滚动粘滞等场景，层级和渲染顺序就很容易错乱。动手前先确认：你要的是视觉叠加效果，还是真正的 Alpha 遮罩逻辑？前者用 background，后者才碰 mask-image。
