HTML怎么给图片加渐变遮罩层_网页图片文字展示指南

作者：袖梨 2026-06-18

伪元素叠加 linear-gradient() 是最稳方案，IE9+ 全支持；mask-image 兼容性差，Firefox 忽略、Safari 错解 transparent、Chrome/Edge 需前缀；需容器 relative + 伪元素 absolute 覆盖；背景图场景用多层 background；加交互内容须用真实 DOM；遮罩透明度需依图片明暗反向调整。

直接用伪元素叠加 linear-gradient() 是最稳、最易调试的方案，不需要 JS，不依赖实验性属性，IE9+ 全支持。

为什么不用 `mask-image: linear-gradient()`

它看起来更“正宗”，但实际是兼容性陷阱：mask-image: linear-gradient(to bottom, black, transparent) 在 Firefox 中被完全忽略，在 Safari 中 transparent 会被转成 #000 导致全显，在 Chrome/Edge 中必须加 -webkit-mask-image 前缀才生效。你写了一行代码，却要为三套逻辑兜底。除非你要做 Alpha 裁剪（比如镂空文字），否则这不是遮罩，是自找麻烦。

`::before` 伪元素叠加渐变层的关键设置

核心不是给 <img> 加样式，而是把图片包进一个容器，再让伪元素“浮”在上面：

容器必须设 position: relative 和明确尺寸（如 display: inline-block 或 width: 100%）
伪元素必须有 content: ""，否则不渲染
伪元素需设 position: absolute + top: 0; left: 0; width: 100%; height: 100%
渐变方向推荐 to bottom（比 0deg 更直观），alpha 值必须用小数，如 rgba(0,0,0,0.6)，不能写 70%
如果容器是响应式（height: auto），确保其高度可计算，否则伪元素可能塌陷或错位

背景图场景下直接用 `background` 多层叠加

如果图片是通过 background-image 设置的（比如 banner 区域），别额外加 DOM 元素，直接复用同一元素的背景栈：

渐变必须写在图片前面：background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url('hero.jpg');
两层之间用英文逗号分隔，漏掉会整个声明失效
必须配 background-size: cover 或 100% 100%，否则小屏上渐变只覆盖原始图片尺寸区域
避免 background-attachment: fixed，iOS Safari 里它会让渐变层不随滚动更新
父容器高度不能是 auto，得设 min-height: 100vh 或具体值，否则背景无渲染空间

需要放文字或按钮？别硬塞进伪元素

::before 和 ::after 是伪元素，不支持子节点、无法聚焦、对屏幕阅读器不友好。一旦你要加链接、按钮、标题，就得换成真实 <div class="overlay">：

立即学习“前端免费学习笔记（深入）”；

结构变成：<div class="img-wrap"><img><div class="overlay"><h3>标题</h3><a href="#">按钮</a></div></div>
.overlay 同样需 position: absolute + top/left/right/bottom: 0 覆盖
文字居中推荐 display: flex; justify-content: center; align-items: center
背景用 background: rgba(0,0,0,0.6)，别用 opacity，否则文字也跟着变淡