但还有另一种方法在这里回答,我将在下面复制：
http://stackoverflow.com/a/16910152/1026017

这是一个演示：
http://codepen.io/chrisboon27/pen/ACdka

选项1：:: before psuedo-element：

.before_method{
  position:relative;
}
.before_method:before{
  display:block;
  content:" ";
  position:absolute;
  z-index:-1;
  background:rgb(18,176,41);
  top:0;
  left:0;
  right:0;
  bottom:0;
  opacity:0.5;
}
.before_method:hover:before{
  opacity:1;
}

选项2：白色gif覆盖：

.image_method{
  background-color: rgb(118,76,41);
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/f/fc/Translucent_50_percent_white.png)
}
.image_method:hover{
  background-image:none;
}

选项3：Box-shadow方法(gif方法的变体 – 可能有性能问题)：

.shadow_method{
  background-color: rgb(18,41);
  Box-shadow:inset 0 0 0 99999px rgba(255,255,0.2);
}
.shadow_method:hover{
  Box-shadow:none;
}