CSS图片hover渐变遮罩实现技巧

• 直接给 加 ::before 无效—— 是替换元素，不支持伪元素
• 推荐结构：
  

用 ::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;
}
/ 示例：hover 时居中显示文字 /
.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。

理论要掌握，实操不能落！以上关于《CSS图片hover渐变遮罩实现技巧》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！