html - 在不更改背景图像不透明度的情况下更改背景颜色不透明度

Question

我想在用户悬停按钮时增加按钮的背景色亮度。但无论按钮的颜色如何，我都想这样做。在下面，您可以看到四个按钮。只有最后一个有效，因为它有明确配置为黄色的 :hover 处理程序。

.hoverme {
    display: inline-block;
    padding:0px;
    width:5em;
    height:5em;
    background-color:black;
    cursor: pointer;
}
.hoverme:hover .inner {
    /*
   Pseudocode:
     background-color-opacity: 1;
    */
}
.hoverme .inner {
    margin: 0px;
    padding:0px;
    height: 100%;
}

.hoverme.red .inner {
    background-color: rgba(255,0,0,.9);
}
.hoverme.green .inner {
    background-color: rgba(0,200,0,.9);
}
.hoverme.yellow .inner {
    background-color: rgba(250,240,0,.9);
}

.hoverme.yellow.works-but-not-nice:hover .inner {
    background-color: rgba(250,240,0,1);
}

<div class="hoverme red"><div class="inner">text</div></div>

<div class="hoverme green"><div class="inner">text</div></div>

<div class="hoverme yellow"><div class="inner">text</div></div>

<div class="hoverme yellow works-but-not-nice"><div class="inner">this works</div></div>

所以我想改变背景颜色的不透明度，不管它是黄色、红色还是其他颜色。背景图像或内容应始终完全不透明。

在不添加更多 div 元素的情况下执行此操作的奖励积分。

Answer 1

在这种情况下，我会考虑在定义悬停时更改的不透明度值的地方使用 CSS 变量:

:root {
  --opacity:0.8;
}
.hoverme {
    display: inline-block;
    padding:0px;
    width:5em;
    height:5em;
    background-color:black;
    cursor: pointer;
}
.hoverme:hover .inner {
   --opacity:1;
}
.hoverme .inner {
    margin: 0px;
    padding:0px;
    height: 100%;
}

.hoverme.red .inner {
    background-color: rgba(255,0,0,var(--opacity));
}
.hoverme.green .inner {
    background-color: rgba(0,200,0,var(--opacity));
}
.hoverme.yellow .inner {
    background-color: rgba(250,240,0,var(--opacity));
}

<div class="hoverme red"><div class="inner">text</div></div>

<div class="hoverme green"><div class="inner">text</div></div>

<div class="hoverme yellow"><div class="inner">text</div></div>