可用linear-gradient实现图片底部黑色渐变遮罩：优先用background-image叠加（渐变在前、to top），或伪元素::after绝对定位覆盖；需控制透明度过渡、适配响应式与圆角。
在 H5 页面中，可以用 CSS 的 linear-gradient 覆盖在图片上，实现图像底部的黑色渐变遮罩（常用于文字叠加时提升可读性）。关键在于用半透明黑色从下往上渐变，叠加在图片之上，且不破坏图片结构。
使用 background-image 叠加渐变层
最常用、语义清晰的方式：把图片作为背景，再叠加一层渐变背景。适用于 div 或其他容器元素：
- 设置容器尺寸与图片一致（如通过
aspect-ratio或固定宽高） - 用
background-image同时声明图片和渐变，用逗号分隔，**渐变写在前面**（图层更上层） - 渐变方向设为
to top，确保黑色从底部向上消退
.img-with-shadow {
width: 100%;
aspect-ratio: 16/9;
background-image:
linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.05) 60%, transparent),
url('your-image.jpg');
background-size: cover;
background-position: center;
}用伪元素 ::after 实现（适合 img 标签）
当必须保留原生 <img> 标签（如需 SEO、懒加载或响应式 srcset）时，可用父容器 + ::after 绝对定位覆盖：
- 父容器设
position: relative，display: inline-block或指定尺寸 -
img设display: block避免底部留白 -
::after设绝对定位，全尺寸覆盖，用linear-gradient(to top, ...)实现渐变
<div class="img-container"> <img src="photo.jpg" alt="示例图"> </div>CSS：
.img-container {
position: relative;
display: inline-block;
}
.img-container img {
display: block;
width: 100%;
height: auto;
}
.img-container::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40%; /* 渐变覆盖高度，可调 */
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
pointer-events: none; /* 确保不拦截点击事件 */
}注意透明度与过渡自然度
纯黑（rgba(0,0,0,1)）容易生硬。建议：
立即学习“前端免费学习笔记（深入）”；
- 底部起点用
rgba(0,0,0,0.6 ~ 0.8)，保证遮罩力度 - 中间过渡段拉长（如
60%处设为rgba(0,0,0,0.1)），避免断层 - 顶部收尾一定要是
transparent或极低透明度，让图像上半部分完全可见
适配移动端与高清屏的小技巧
H5 常需兼容不同设备：
- 用
vh或rem控制渐变高度（如height: 30vw），比固定 px 更灵活 - 若图片有圆角，记得给伪元素或容器也加相同
border-radius，否则渐变会溢出 - 在 iOS Safari 中，确保父容器没触发
transform: translateZ(0)类似强制硬件加速的属性，否则可能影响渐变渲染
