可用::before伪元素在图片容器上叠加渐变遮罩实现hover淡入效果，关键需设容器position: relative、::before含content且absolute定位、背景为linear-gradient并用opacity控制显隐。
可以用 ::before 伪元素在图片上叠加一层带透明度的渐变遮罩，hover 时通过 opacity 或 background 的变化实现淡入效果，关键在于正确设置定位和层级。
确保图片容器有相对定位
伪元素需要相对于父容器定位，所以图片外层（比如 <div class="img-wrap">）必须设 <code>position: relative，否则 ::before 可能脱离预期位置。
- 直接给
<img alt="css图片hover时想加渐变遮罩如何实现_利用::before伪元素覆盖渐变层" >加::before无效——<img alt="css图片hover时想加渐变遮罩如何实现_利用::before伪元素覆盖渐变层" >是替换元素，不支持伪元素 - 推荐结构：
<div class="img-wrap"><img src="..." alt="css图片hover时想加渐变遮罩如何实现_利用::before伪元素覆盖渐变层" ></div>
用 ::before 创建渐变遮罩层
在容器上定义 ::before，铺满整个区域，背景设为线性渐变，并默认隐藏（如 opacity: 0）：
.img-wrap { position: relative; display: inline-block; /* 防止宽高塌陷 */ } .img-wrap::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(0,0,0,0.6), rgba(0,0,0,0.2)); opacity: 0; transition: opacity 0.3s ease; z-index: 1; }hover 时显示遮罩并可选加文字或其他效果
触发 hover 时让遮罩显现；如果还需显示标题或按钮，可额外加 ::after 或子元素，统一用 z-index 控制层级：
立即学习“前端免费学习笔记（深入）”；
.img-wrap:hover::before { opacity: 1; } <p>/<em> 示例：hover 时居中显示文字 </em>/ .img-wrap::after { content: "点击查看"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 14px; opacity: 0; transition: opacity 0.3s ease; z-index: 2; } .img-wrap:hover::after { opacity: 1; }注意细节避免常见问题
遮罩不显示？大概率是这几个原因：
- 父容器没设
position: relative -
::before缺少content: ''（伪元素必须有 content 才渲染） - 图片本身
display: block没加，导致底部留白影响布局 - 渐变色透明度太高或太低，看不出变化，建议从
rgba(0,0,0,0.7)开始调试
基本上就这些。核心就是“容器相对定位 + 伪元素绝对覆盖 + 渐变背景 + hover 控制显隐”，不复杂但容易忽略定位和 content。