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

我想增加按钮的背景色亮度时，用户悬停它。但不管按钮的颜色如何，我都想这么做。贝娄，你可以看到四个按钮。只有最后一个有效，因为它有显式配置为黄色的

：hover

处理程序

.hoverme{
显示：内联块；
填充：0px；
宽度：5em；
身高：5公分；
背景色：黑色；
光标：指针；
}
.hoverme:hovere.inner{
/*
伪代码：
背景色不透明度：1；
*/
}
.我.内心{
边际：0px；
填充：0px；
身高：100%；
}
.hoverme.red.内部{
背景色：rgba（255,0,0,9）；
}
.hoverme.green.inner{
背景色：rgba（0200,0,9）；
}
.hoverme.yellow.inner{
背景色：rgba（250240,0,9）；
}
.hoverme.yellow.有效但不好：hoverme.inner{
背景色：rgba（250240,0,1）；
}

文本
文本
文本
这很有效

.hoverme{
显示：内联块；
填充：0px；
宽度：5em；
身高：5公分；
背景色：黑色；
光标：指针；
}
.hoverme:hovere.inner{
不透明度：1！重要；
}
.我.内心{
边际：0px；
填充：0px；
身高：100%；
}
.hoverme.red.内部{
背景色：rgb（255,0,0）；
不透明度：.9；
}
.hoverme.green.inner{
背景色：rgb（0200,0）；
不透明度：.9；
}
.hoverme.yellow.inner{
背景色：rgb（250240,0）；
不透明度：.9；
}

文本
文本
文本

.hoverme{
显示：内联块；
填充：0px；
宽度：5em；
身高：5公分；
背景色：黑色；
光标：指针；
}
.hoverme:hovere.inner{
不透明度：1！重要；
}
.我.内心{
边际：0px；
填充：0px；
身高：100%；
}
.hoverme.red.内部{
背景色：rgb（255,0,0）；
不透明度：.9；
}
.hoverme.green.inner{
背景色：rgb（0200,0）；
不透明度：.9；
}
.hoverme.yellow.inner{
背景色：rgb（250240,0）；
不透明度：.9；
}

文本
文本
text

For.hoverme.internal'add'背景：rgba（0,0,0,0.2）”和For.hoverme:hover.internal'add'背景：rgba（0,0,0,0）–它将向内部元素添加透明的黑色背景，并在悬停时将此背景的不透明度设置为0。然后，每个背景色只添加到每个“hoverme”元素中，而不是添加到“内部”，并删除所有不透明度规则等。完整代码如下：

.hoverme{
显示：内联块；
填充：0px；
宽度：5em；
身高：5公分；
光标：指针；
}
.我.内心{
边际：0px；
填充：0px；
身高：100%；
背景：rgba（0,0,0,0.2）；
}
.hoverme:hovere.inner{
背景：rgba（0,0,0,0）；
}
.我是红色的{
背景色：rgb（255,0,0）；
}
.我是格林{
背景色：rgb（0200,0）；
}
.黄色{
背景色：rgb（250240,0）；
}

文本
文本
text

For.hoverme.internal'add'背景：rgba（0,0,0,0.2）”和For.hoverme:hover.internal'add'背景：rgba（0,0,0,0）–它将向内部元素添加透明的黑色背景，并在悬停时将此背景的不透明度设置为0。然后，每个背景色只添加到每个“hoverme”元素中，而不是添加到“内部”，并删除所有不透明度规则等。完整代码如下：

.hoverme{
显示：内联块；
填充：0px；
宽度：5em；
身高：5公分；
光标：指针；
}
.我.内心{
边际：0px；
填充：0px；
身高：100%；
背景：rgba（0,0,0,0.2）；
}
.hoverme:hovere.inner{
背景：rgba（0,0,0,0）；
}
.我是红色的{
背景色：rgb（255,0,0）；
}
.我是格林{
背景色：rgb（0200,0）；
}
.黄色{
背景色：rgb（250240,0）；
}

文本
文本
在这种情况下，我会考虑使用CSS变量来定义我在悬停上改变的不透明度值：


：根目录{
--不透明度：0.8；
}
.我{
显示：内联块；
填充：0px；
宽度：5em；
身高：5公分；
背景色：黑色；
光标：指针；
}
.hoverme:hovere.inner{
--不透明度：1；
}
.我.内心{
边际：0px；
填充：0px；
身高：100%；
}
.hoverme.red.内部{
背景色：rgba（255,0,0，var（--不透明度））；
}
.hoverme.green.inner{
背景色：rgba（0200,0，var（--不透明度））；
}
.hoverme.yellow.inner{
背景色：rgba（250240,0，var（--不透明度））；
}
文本
文本
在这种情况下，我会考虑使用CSS变量来定义我在悬停上改变的不透明度值：


：根目录{
--不透明度：0.8；
}
.我{
显示：内联块；
填充：0px；
宽度：5em；
身高：5公分；
背景色：黑色；
光标：指针；
}
.hoverme:hovere.inner{
--不透明度：1；
}
.我.内心{
边际：0px；
填充：0px；
身高：100%；
}
.hoverme.red.内部{
背景色：rgba（255,0,0，var（--不透明度））；
}
.hoverme.green.inner{
背景色：rgba（0200,0，var（--不透明度））；
}
.hoverme.yellow.inner{
背景色：rgba（250240,0，var（--不透明度））；
}
文本
文本
text
编写
有什么问题：为
.red
和
.green
类或使用
不透明度：
？编写
有什么问题：为
.red
和
.green
类或使用
不透明度：
编写
规则有什么问题？我知道他想更改背景颜色的不透明度，而不是整个按钮的不透明度我知道他想改变背景颜色的不透明度，而不是整个按钮的不透明度完美..如此简单。我完全不知道你能做到。我认为CSS变量是常量。这改变了很多事情！非常感谢您的回答@TomášZato嗯，它们被称为变量：）所以你可以改变它们；）你会发现你可以和他们一起变魔术：）每