在网页开发中给HTML图片添加渐变蒙版，本质是通过CSS的渐变属性和定位布局，在图片上方叠加一层半透明的渐变层，从而实现图片边缘渐隐、与背景融合等效果，不需要修改原图片本身的内容。
实现渐变蒙版的核心思路
渐变蒙版的实现主要依赖三个部分：一是承载图片的容器元素，二是图片本身，三是通过伪元素或者额外元素生成的渐变层。通过绝对定位让渐变层覆盖在图片上方，再设置渐变的透明色，就能透过渐变层看到下方的图片，形成蒙版效果。
基础线性渐变蒙版实现
线性渐变是最常用的渐变蒙版类型，可以实现从上到下、从左到右等方向的渐变效果，下面是完整的实现示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片线性渐变蒙版示例</title>
<style>
/* 图片容器，设置相对定位作为定位参照 */
.img-container {
position: relative;
width: 800px;
height: 400px;
}
/* 图片样式，填满容器 */
.img-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 伪元素生成渐变蒙版层 */
.img-container::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* 从上到下的白色渐变，顶部不透明底部全透明 */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
pointer-events: none; /* 避免蒙版层阻挡图片的交互事件 */
}
</style>
</head>
<body>
<div class="img-container">
<img src="https://ippipp.com/800/400?random=2" alt="示例图片">
</div>
</body>
</html>径向渐变蒙版实现
如果需要实现从中心向四周扩散的渐变蒙版，可以使用径向渐变，示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片径向渐变蒙版示例</title>
<style>
.radial-container {
position: relative;
width: 600px;
height: 600px;
border-radius: 50%; /* 容器设为圆形，配合径向渐变更自然 */
overflow: hidden;
}
.radial-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
.radial-container::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* 从中心到四周的渐变，中心全透明，边缘半透明黑色 */
background: radial-gradient(circle, rgba(0,0,0,0) 30%, rgba(0,0,0,0.6) 100%);
pointer-events: none;
}
</style>
</head>
<body>
<div class="radial-container">
<img src="https://ippipp.com/600/600?random=3" alt="圆形示例图片">
</div>
</body>
</html>渐变参数调整说明
可以通过调整linear-gradient和radial-gradient的参数，改变渐变蒙版的效果：
- 渐变方向：线性渐变可以修改为
to left、to right top等方向，实现不同角度的渐变 - 颜色停顿点：可以设置多个颜色值，比如
linear-gradient(to bottom, rgba(255,255,255,1) 20%, rgba(255,255,255,0.5) 60%, rgba(255,255,255,0) 100%)，控制不同位置的透明度 - 渐变形状：径向渐变可以修改
circle为ellipse，调整为椭圆形渐变
兼容性处理
如果需要兼容旧版本浏览器，可以添加带前缀的渐变属性，示例代码：
/* 兼容webkit内核浏览器 */ background: -webkit-linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* 兼容旧版火狐浏览器 */ background: -moz-linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* 标准语法放在最后 */ background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
这种渐变蒙版的实现方式不会影响原图片的加载和显示，所有效果都通过CSS完成，修改调整非常方便，适合大部分网页场景使用。
HTMLgradient_masklinear_gradientCSSimage_overlay修改时间：2026-06-04 03:54:45