CSS设置白色背景按钮受背景影响变色的原因及解决方法

按钮显示异常的根源是#parent容器上设置的opacity: 30%属性。
CSS的opacity控制的是元素整体（包括元素本身、所有内部子元素）的渲染透明度，不是仅作用于元素自身背景。你的#parent容器本身没有设置背景，加了30%透明度后，容器内部的玩家面板、按钮都会被统一叠加30%的透明度——哪怕按钮本身设了纯白色不透明背景，渲染时也会透出下方的渐变背景，自然没法显示成纯白。

不要靠父容器的opacity实现面板半透明效果，只给需要透明的玩家面板单独设置带alpha通道的背景色，透明效果只会作用在面板背景上，不会干扰按钮的显示：

• 第一步：删掉#parent样式里的opacity: 30%;声明
• 第二步：直接给两个玩家状态类设置对应透明度的白色背景，不需要靠父元素透明度叠加
• 第三步：JS里切换玩家状态时，直接给对应面板设置不透明/半透明的白色值即可

核心修改后的样式参考：

#parent {
    height: 70%;
    width: 70%;
    position: absolute;
    top: 20%;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.activePlayer {
    background-color: #ffffff;
}

.inActivePlayer {
    background-color: rgba(255, 255, 255, 0.5);
}

改完之后按钮本身的白色背景不会再被叠加透明度，就能正常显示纯白色了。如果你需要父容器本身带半透明白色背景，直接给#parent加background: rgba(255,255,255, 对应透明度值)就行，不要用opacity——背景色的alpha通道只会影响容器自身背景，不会把子元素也变透明。

内容的提问来源于stack exchange，提问作者Sambhav Khandelwal