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

【问题标题】：Apply opacity to only background color of button not to text color仅将不透明度应用于按钮的背景颜色而不是文本颜色
【发布时间】：2018-07-02 19:52:50
【问题描述】：

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

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

【问题讨论】：

标签： html css

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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>

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

【讨论】：