参见英文答案 >
Is it possible to change only the alpha of a rgba background colour on hover?9个
我随机地将颜色生成50×50像素的盒子,当我将它们悬停下来时,我希望它们变得更暗,但是保持相同的颜色.
我随机地将颜色生成50×50像素的盒子,当我将它们悬停下来时,我希望它们变得更暗,但是保持相同的颜色.
我已经尝试设置li：悬停到一个深色的透明度
background-color: rgba(91,91,0.51) !important;
但它看起来不太好,它使整个< li> (这是我指的是)透明的悬停.
我该如何实现？
解决方法
对不起,不可能只更改alpha.您必须为每个单独的类指定红色,绿色和蓝色值.
但还有另一种方法在这里回答,我将在下面复制：
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;
}
