更改背景颜色不透明度而不更改背景图像不透明度

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>