Css 是否可以在悬停时仅更改 rgba 背景 colored颜色的 alpha

发布于08月06日

我有一个由<a>个标签组成的集合，它们具有不同的RGBA背景色，但具有相同的Alpha.是否可以编写仅更改RGBA属性的不透明度的单一CSS样式？

代码的快速示例如下:

 <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>悬停在上面时，它会改变不透明度，同时保持 colored颜色不变.

差不多

a:hover .green, a:hover .brown {background-color: rgba(inherit,inherit,inherit,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); }

要了解其工作原理，请参阅How do I apply opacity to a CSS color variable?

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

遗憾的是，不能，您必须 for each 单独的类重新指定红色、绿色和蓝色的值:

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也是不合适的.