在网页开发过程中，我们经常需要实现两张图片叠加，同时让上层图片的特定区域透明，从而露出下层图片的效果，这种需求常见于创意海报、图片遮罩、特殊展示卡片等场景。实现该效果的核心思路是控制上层图片的显示范围，让特定区域不显示上层内容，自然就会露出下层的图片。
方法一：使用 CSS mask 属性实现
CSS 的 mask 属性可以为元素添加遮罩层，遮罩层中透明区域会隐藏元素对应部分，不透明区域会显示元素对应部分，非常适合实现图片叠加显露特定区域的效果。
首先我们需要准备两层图片的容器结构，上层图片添加遮罩即可：
<div class="img-container"> <img class="bottom-img" src="https://ipipp.com/bg.jpg" alt="下层背景图"> <img class="top-img" src="https://ipipp.com/cover.jpg" alt="上层叠加图"> </div>
对应的 CSS 样式如下：
.img-container {
position: relative;
width: 600px;
height: 400px;
}
.bottom-img, .top-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.top-img {
/* 使用径向渐变作为遮罩，中心圆形区域透明，其余区域不透明 */
mask: radial-gradient(circle at center, transparent 100px, black 100px);
-webkit-mask: radial-gradient(circle at center, transparent 100px, black 100px);
}
上述代码中，mask 属性使用了径向渐变，中心 100px 的区域是透明的，所以上层图片的中心区域会被隐藏，从而露出下层的背景图。如果需要调整显露区域的形状，可以修改渐变的类型，比如使用线性渐变实现矩形显露区域：
.top-img {
/* 线性渐变实现矩形显露区域 */
mask: linear-gradient(to right, transparent 200px, black 200px);
-webkit-mask: linear-gradient(to right, transparent 200px, black 200px);
}
方法二：使用 clip-path 属性实现
clip-path 属性可以裁剪元素的显示区域，只显示裁剪路径内的内容，同样可以实现上层图片特定区域露出下层图片的效果，不过这种方式是让上层图片只在特定区域显示，其余部分隐藏，和 mask 的实现逻辑相反。
同样使用之前的 HTML 结构，修改上层图片的样式：
.top-img {
/* 使用圆形裁剪路径，只显示中心100px的圆形区域 */
clip-path: circle(100px at center);
}
此时上层图片只有中心 100px 的圆形区域会显示，其余部分被裁剪隐藏，自然就会露出下层的图片。如果需要实现不规则形状的显露区域，可以使用 polygon 函数定义多边形路径：
.top-img {
/* 多边形裁剪路径，实现三角形显露区域 */
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
方法三：使用 background-blend-mode 实现（仅适用于背景图片场景）
如果两张图片都是作为元素的背景图使用，那么可以通过 background-blend-mode 属性配合混合模式来实现效果，不过这种方式的可控性稍弱，适合简单的叠加场景。
HTML 结构可以简化为单个容器：
<div class="blend-container"></div>
CSS 样式如下：
.blend-container {
width: 600px;
height: 400px;
background-image: url(https://ipipp.com/cover.jpg), url(https://ipipp.com/bg.jpg);
background-size: cover;
background-position: center;
/* 使用差值混合模式，上层图片特定区域会和底层混合露出底层 */
background-blend-mode: difference;
}
这种方式的限制比较多，需要两张背景图的位置、尺寸完全匹配，且混合模式的效果不一定能完全符合预期的显露形状，适合对效果要求不高的场景。
几种方法的对比
我们可以通过表格对比几种方法的适用场景和优缺点：
| 实现方法 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|
| mask 属性 | 需要灵活控制显露区域形状、透明度渐变的场景 | 支持各种渐变、图片作为遮罩，效果丰富 | 部分旧浏览器需要加 -webkit- 前缀兼容 |
| clip-path 属性 | 需要裁剪出固定形状显示区域的场景 | 语法简单，支持各种几何形状路径 | 只能做硬边缘裁剪，无法实现半透明渐变效果 |
| background-blend-mode | 两张图片都作为背景图，效果要求简单的场景 | 代码简洁，无需额外嵌套元素 | 可控性差，不适合复杂形状需求 |
注意事项
- 使用 mask 属性时，要注意浏览器兼容性，部分旧版本浏览器需要添加
-webkit-前缀才能正常生效。 - 如果显露区域需要动态变化，可以通过 CSS 变量或者 JavaScript 动态修改 mask、clip-path 的属性值来实现动画效果。
- 图片叠加时要注意两张图片的尺寸匹配，避免出现显示错位的问题，可以使用
object-fit: cover或者background-size: cover保证图片填充容器。
根据实际的项目需求选择合适的实现方式，就可以快速完成图片叠加特定区域显露下方图片的效果。
CSS图片叠加maskclip_pathbackground_blend_mode修改时间：2026-07-22 04:54:31