我有一组 <a> 标签，它们的 rgba 背景颜色不同，但 alpha 相同.是否可以编写一个只改变 rgba 属性的不透明度的 CSS 样式?

I have a set of <a> tags with differing rgba background colours but the same alpha. Is it possible to write a single css style that will change only the opacity of the rgba attribute?

代码的简单示例:

 <a href="#"><img src="" /><div class="brown">Link 1</div></a>
 <a href="#"><img src="" /><div class="green">Link 2</div></a> 

还有样式

a {display: block; position: relative}
.brown {position: absolute; bottom: 0; background-color: rgba(118,76,41,.8);}
.green {position: absolute; bottom: 0; background-color: rgba(51,91,11,.8);}

我想做的是编写一个样式，当 <a> 悬停在上面时会改变不透明度，但保持颜色不变.

What I would like to do is write a single style that would change the opacity when the <a> is hovered over, yet keep the colour unchanged.

类似

a:hover .green, a:hover .brown {background-color: rgba(inherit,inherit,inherit,1);}

推荐答案

现在可以使用自定义属性:

This is now possible with custom properties:

.brown { --rgb: 118, 76, 41; }
.green { --rgb: 51, 91, 11; }

a { display: block; position: relative; }
div { position: absolute; bottom: 0; background-color: rgba(var(--rgb), 0.8); }
a:hover div { background-color: rgba(var(--rgb), 1); }

要了解其工作原理，请参阅 如何将不透明度应用于 CSS 颜色变量?

To understand how this works, see How do I apply opacity to a CSS color variable?

如果自定义属性不是一个选项，请参阅下面的原始答案.

If custom properties are not an option, see the original answer below.

很遗憾，不，您必须为每个单独的类再次指定红色、绿色和蓝色值:

Unfortunately, no, you'll have to specify the red, green and blue values again for each individual class:

a { display: block; position: relative; }

.brown { position: absolute; bottom: 0; background-color: rgba(118, 76, 41, 0.8); }
a:hover .brown { background-color: rgba(118, 76, 41, 1); }

.green { position: absolute; bottom: 0; background-color: rgba(51, 91, 11, 0.8); }
a:hover .green { background-color: rgba(51, 91, 11, 1); }

您只能单独使用 inherit 关键字作为属性的值，即使这样使用 inherit 在这里也不合适.

You can only use the inherit keyword alone as a value for the property, and even then the use of inherit isn't appropriate here.