是否可以在悬停时仅更改 rgba 背景颜色的 alpha?
我有一组 <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.
相关文章