使用mask与opacity结合实现图片遮罩效果，先通过伪元素创建遮罩层，再用linear-gradient定义渐变蒙版，配合opacity调整整体透明度，使文字在复杂背景上更清晰，提升视觉层次与可读性。
在CSS初级项目中，实现图片遮罩效果常用于提升视觉层次，比如在轮播图、卡片封面或背景图上添加文字时，避免因图片颜色复杂导致文字看不清。通过结合 mask 与 opacity，可以做出更细腻的遮罩表现。
理解 mask 与 opacity 的作用
mask 属性用于定义元素的可见区域，可以使用渐变、图片或透明度来“遮住”部分内容，类似“蒙版”。而 opacity 控制整个元素的透明度，值从 0（完全透明）到 1（完全不透明）。
将两者结合，可以在保持图片内容的同时，让遮罩层有渐变或局部透明效果，增强可读性和美观性。
基础实现：用伪元素 + mask 实现渐变遮罩
通常做法是给图片容器添加一个伪元素作为遮罩层，再通过 mask 设置线性或径向渐变控制遮罩范围。
立即学习“前端免费学习笔记（深入）”；
.container {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
background-image: url('your-image.jpg');
background-size: cover;
}
.container::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.6); / 遮罩颜色 /
-webkit-mask: linear-gradient(45deg, transparent, black);
mask: linear-gradient(45deg, transparent, black);
opacity: 0.8;
}
这里，::before 创建了一个覆盖层，mask 使用渐变从透明过渡到黑色，使遮罩呈现方向性变化。opacity 进一步微调整体透明感。
实用技巧：配合文字提升可读性
遮罩常用于突出上方文字。例如：
.text-overlay {
position: absolute;
color: white;
font-size: 18px;
padding: 20px;
bottom: 10px;
left: 10px;
z-index: 2;
}
此时，即使图片下半部分较亮，文字也能清晰显示，因为遮罩降低了背景干扰。
注意事项
- mask 兼容性较弱，旧版浏览器可能不支持，建议搭配 background 模拟降级方案。
- opacity 会影响整个元素，包括子元素，若只想遮罩背景，应确保遮罩层独立于内容。
- 使用 mask-image 时，可用渐变或 PNG 图片实现更复杂的镂空效果。
基本上就这些。掌握 mask 与 opacity 的协作，能让图片遮罩不再只是“加个黑底”，而是更有设计感的视觉处理方式。
