给背景图加一层颜色遮罩是前端开发里非常常见的需求，比如banner图上叠一层半透明黑色让白色标题更醒目，或者给卡片封面图叠加品牌色营造统一的视觉风格。实现方式有好几种，不需要修改图片本身，纯CSS就能搞定。下面结合代码把主流做法都过一遍。
方法一：利用 linear-gradient 多背景叠加
CSS3允许给同一个元素的background属性设置多层背景，前面的图层会覆盖在后面的图层之上。利用这个特性，我们可以在背景图上面叠一层半透明的渐变颜色，这就是最常用的遮罩方案。渐变的两端使用相同的颜色，就相当于一层纯色半透明遮罩。
.banner {
width: 100%;
height: 400px;
/* 第一层是遮罩渐变，第二层是背景图，遮罩在上层 */
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url('bg.jpg') no-repeat center / cover;
}
这种写法的优点是只需要一个元素，不引入额外的DOM节点，性能好，代码也简洁。rgba的最后一个参数控制透明度，0.5表示50%不透明度的黑色。如果想要渐变式的遮罩效果，比如底部变暗顶部透明，只需要把渐变两端的颜色设置成不同透明度即可。
/* 从上到下：顶部透明，底部半透明黑，常用于图片上的文字压底 */
.mask {
background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.7) 100%),
url('bg.jpg') no-repeat center / cover;
}
需要注意background-size如果写在简写里只对最后一层生效，多层背景各自设置尺寸时要分开写，或者用逗号对应赋值。另外遮罩层一定要写在背景图的前面，顺序写反了遮罩会被图片盖住，看起来就是没有任何效果。
方法二：使用 background-blend-mode 混合模式
background-blend-mode是专门用来混合同一元素多个背景图层的属性，它能让颜色层和图片按指定模式混合，效果比简单的半透明叠加更丰富。常用的multiply（正片叠底）会让图片整体被颜色染色，适合做单色调的风格化封面。
.blend {
width: 100%;
height: 400px;
background-color: #3498db;
background-image: url('bg.jpg');
background-size: cover;
background-blend-mode: multiply;
}
上面这段代码会让蓝色和图片做正片叠底混合，整体呈现带蓝调的暗色效果，很多网站的团队介绍、作品集板块就用这种手法处理图片，保证整页色调统一。如果想要图片更亮一些，可以把blend模式换成overlay或soft-light试试，混合结果各有不同。
这个方案的局限在于兼容性：IE浏览器完全不支持background-blend-mode，一些老版本移动端浏览器表现也不一致。如果项目需要兼容IE，建议还是回到第一种渐变叠加的方案。不过在现代浏览器环境下，这种方式的效果是几种方案里最细腻的。
方法三：借助伪元素叠加遮罩层
如果需要遮罩上再放内容、或者遮罩需要单独做动画过渡，用::before或::after伪元素是最灵活的方式。原理是给容器设置position: relative，然后让伪元素绝对定位铺满整个容器，在伪元素上设置半透明背景色，内容层的z-index要高于伪元素。
.card {
position: relative;
background: url('bg.jpg') no-repeat center / cover;
height: 300px;
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
transition: background 0.3s;
}
.card:hover::before {
/* 鼠标悬停时遮罩加深 */
background: rgba(0, 0, 0, 0.7);
}
.card .text {
position: relative;
z-index: 1;
color: #fff;
}
伪元素方案最大的优势是遮罩本身变成了一个可以独立控制的图层，可以做hover加深、渐入渐出等交互动画，也可以在遮罩上叠加更复杂的图案。上面示例就实现了鼠标移入时遮罩加深的效果，这在卡片列表 hover 场景里非常实用。
使用时要留意两点：一是伪元素默认会盖住容器里的内容，所以真正要显示的文字或按钮必须设置position: relative并提高z-index；二是伪元素铺满后如果容器有圆角，记得给伪元素也加上同样的border-radius和overflow: hidden，否则遮罩会溢出圆角。
方法四：遮罩图片与mask属性的结合用法
CSS3里还有一个mask（蒙版）属性，虽然名字听起来和遮罩类似，但作用方向完全不同：它是用一张图或渐变的透明度信息来裁剪元素本身，让元素只显示蒙版不透明的部分。严格来说它不是给背景图叠颜色，但在一些设计需求里两者会配合使用。
.fade-img {
width: 300px;
height: 200px;
background: url('bg.jpg') no-repeat center / cover;
/* 用线性渐变做蒙版，让图片右侧逐渐透明消失 */
-webkit-mask-image: linear-gradient(to right, #000 60%, transparent 100%);
mask-image: linear-gradient(to right, #000 60%, transparent 100%);
}
这个例子实现了图片向右淡出消失的效果，常用于轮播图边缘融合、图片与页面背景色自然衔接等场景。mask-image配合渐变，黑色区域完全显示，transparent区域完全隐藏，中间过渡自然。由于该属性早期只有webkit前缀支持，实际项目中建议把带前缀和不带前缀的写法都加上。
几种方案的对比与选型建议
四种方案各有侧重，简单总结一下选型思路。如果只是静态给背景图压暗或叠色，优先用linear-gradient多背景叠加，一个元素搞定，兼容性最好；如果追求图片染色、风格化的视觉效果且不需要兼容老浏览器，background-blend-mode效果最出众；如果遮罩需要参与交互、做动画，伪元素方案自由度最高；而mask属性更适合做图片淡出、镂空这类形状控制需求。
| 方案 | 优点 | 缺点 | 典型场景 |
|---|---|---|---|
| linear-gradient叠加 | 单元素实现，兼容性好 | 多层背景写法稍繁琐 | banner压暗、固定遮罩 |
| background-blend-mode | 混合效果丰富细腻 | 不支持IE | 图片单色染色、风格化 |
| 伪元素叠加 | 可独立做动画交互 | 需要额外处理层级 | hover加深、渐变浮现 |
| mask蒙版 | 可控制显示形状 | 兼容性需加前缀 | 图片淡出、边缘融合 |
实际项目里这些方法经常组合使用，比如先用渐变叠加做基础压暗，再用伪元素做hover时的动态遮罩。掌握多背景的层叠顺序和透明度控制是核心，理解了这两点，剩下的只是按需求灵活套用的问题。
CSS3背景图遮罩linear-gradient修改时间：2026-09-05 15:19:24