CSS中RGBA属性在hover伪类下不生效的问题咨询

问题1：为何CSS的hover伪类不生效且RGBA属性无法正常工作？ #

常见的原因主要有这几个：

• 选择器不匹配：这是最容易踩的坑！比如你给元素加的类名是.img，但hover写的是.image:hover，类名不一致肯定触发不了效果
• 样式优先级冲突：如果有其他优先级更高的样式（比如带!important的规则、更具体的选择器）覆盖了hover状态的样式，RGBA也会失效
• 背景层级问题：如果元素本身有背景图，直接加background-color会被背景图盖住——因为背景图在颜色层的上方，肉眼看不到颜色效果
• 浏览器兼容性：虽然现在主流浏览器都支持RGBA，但非常老旧的浏览器（比如IE8及以下）不兼容，不过现在这个场景已经很少见了

问题2：给定代码中RGBA在hover状态下不生效的排查与修复 #

先看你提供的代码：

.img { 
  width: 100%; 
  height: 250px; 
  background: url(http://cos.jpg) no-repeat; 
  background-size: cover; 
  margin-bottom: 20px; 
} 
.image:hover{ 
  background-color: rgba(251, 181, 59, 0.5);
}

问题点分析 #

1. 选择器完全不匹配：你的元素类名是.img，但hover规则用的是.image:hover——类名多了个字母"e"，浏览器找不到对应的元素，自然不会生效！
2. 背景层级覆盖：就算选择器改对了，直接加background-color也会被背景图盖住，因为CSS背景的层级是：背景图 > 背景色，所以半透明颜色会被图片挡住看不到。

两种修复方案 #

方案一：用伪元素实现遮罩层

给父元素加相对定位，用::before伪元素生成一个覆盖整个元素的半透明层，hover时显示它：

.img { 
  width: 100%; 
  height: 250px; 
  background: url(http://cos.jpg) no-repeat; 
  background-size: cover; 
  margin-bottom: 20px;
  position: relative; /* 为伪元素定位提供基准 */
} 
.img:hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(251, 181, 59, 0.5);
}

方案二：用渐变叠加背景

把半透明颜色和背景图合并到background属性里，用线性渐变作为底层，背景图叠在上面：

.img { 
  width: 100%; 
  height: 250px; 
  background: url(http://cos.jpg) no-repeat; 
  background-size: cover; 
  margin-bottom: 20px;
} 
.img:hover {
  background: linear-gradient(rgba(251, 181, 59, 0.5), rgba(251, 181, 59, 0.5)), url(http://cos.jpg) no-repeat;
  background-size: cover;
}

内容的提问来源于stack exchange，提问作者Uwis