推荐用伪元素实现：外层容器设 position: relative 和 border-radius+overflow: hidden，::after 伪元素绝对定位覆盖并设相同 border-radius、rgba 背景及 pointer-events: none。
给图片加带圆角的半透明遮罩，核心是用 div 包裹图片，再通过伪元素（如 ::after）或额外子元素叠加一层带 border-radius 和 background-color（含 alpha 通道）的遮罩层。
用伪元素实现（推荐，简洁无冗余标签）
在图片外层套一个相对定位的容器，用 ::after 创建遮罩，控制圆角、透明度和尺寸：
- 容器设
position: relative，确保伪元素能精准覆盖图片 - 伪元素设
position: absolute; top: 0; left: 0; width: 100%; height: 100%，完全贴合图片 - 用
border-radius匹配图片圆角（如12px或50%） - 背景用
rgba(0, 0, 0, 0.4)（黑+40%透明）或hsla(0, 0%, 0%, 0.4)，避免纯黑死板
<div class="img-container">
<img src="photo.jpg" alt="风景">
</div>
<p><style>
.img-container {
position: relative;
display: inline-block;
border-radius: 12px; /<em> 容器圆角，影响裁剪效果 </em>/
overflow: hidden; /<em> 关键：让遮罩圆角生效 </em>/
}
.img-container img {
display: block;
width: 100%;
height: auto;
}
.img-container::after {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.4);
border-radius: 12px;
pointer-events: none; /<em> 遮罩不阻挡鼠标操作 </em>/
}
</style>用子元素遮罩（兼容老浏览器或需复杂样式时）
当需要添加文字、图标或渐变遮罩时，可改用真实子元素（如 <div class="overlay">），更灵活：
- 子元素同样设
position: absolute覆盖图片 - 圆角值必须与容器一致，并配合
overflow: hidden才能显示圆边 - 支持加
backdrop-filter: blur(2px)做毛玻璃效果（现代浏览器） - 若遮罩要响应点击，去掉
pointer-events: none并加交互样式
关键细节别忽略
-
overflow: hidden 必须加在容器上——否则伪元素/子元素的
border-radius会溢出直角边界 - 图片本身设
border-radius不起作用（除非也加overflow: hidden），应统一控制在父容器 - 半透明用
rgba()或hsla()，不用opacity——后者会让整个图片变透明，而非仅遮罩层 - 移动端注意
touch-action: none可能影响滑动，一般不需要加
