将不透明度仅应用于按钮的背景颜色，而不应用于文本颜色

Question

我只需要将不透明度应用于悬停按钮的背景色。按钮的文本颜色不应受不透明度的影响。

当我应用不透明性时..按钮文本颜色也逐渐变暗..应该是这样..我尝试使用带有黑色的线性渐变来获得不透明性效果，但是它显示的是完全黑色。

plunker link -> http://plnkr.co/edit/HLoQf4fznVFx8OK10Wdl?p=preview

Answer 1

您只能使用rgba覆盖背景色，这样您才能将不透明度作为第四个参数传递。

button{
    background: rgba(255,0,0,1);
}
button:hover{
    background: rgba(255,0,0,0.5);
}

Answer 2

opacity属性为元素的背景及其所有子元素增加了透明度。要不对子元素应用不透明度，请改用RGBA颜色值。

#btn:hover {
background: rgba(219, 15, 15, 0.973);
 }

Answer 3

您不应该在悬停时设置不透明度，而必须通过背景rbga处理它。前三个数字是背景色的红色，绿色和蓝色值，第四个数字是“ alpha”通道值，其工作方式与不透明度值相同。有关更多信息，请参见本页：http://css-tricks.com/rgba-browser-support/。这是工作笔

#btn {
  background: rgba(219, 15, 15, 1);
  color: #fff;
}

#btn:hover {
  background: rgba(219, 15, 15,.5);
}

<h1>Hello Plunker!</h1>
<button id="btn" type=button>Click Me</button>

注意：尝试更改按钮的颜色以查看不透明效果。