悬停时是否可以仅更改rgba背景颜色的Alpha？

一尘不染

悬停时是否可以仅更改rgba背景颜色的Alpha？

css

我有一组<a>标签，这些标签的rgba背景颜色不同，但alpha相同。是否可以编写单个CSS样式来仅更改rgba属性的不透明度？

代码的简单示例：

 <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>鼠标悬停在其上时会更改不透明度，同时保持颜色不变。

就像是

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

阅读 284

2020-05-16

共1个答案

一尘不染

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

.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); }

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

不幸的是，不，您必须为每个单独的类再次指定红色，绿色和蓝色值：

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此处也不适合使用。

2020-05-16