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

Question

我需要在悬停时仅对按钮的背景颜色应用不透明度。按钮的文本颜色不应受到不透明度的影响。

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

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

Answer 1

你不应该在悬停时给出不透明度，你必须通过后台 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>

【注】尝试更改按钮的颜色以查看不透明度效果。

Answer 2

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

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

Answer 3

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

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