在悬停时是否可以只更改rgba背景颜色的alpha？ [英] Is it possible to change only the alpha of a rgba background colour on hover?

问题描述

我有一组< 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);}

推荐答案

不幸的是，您不得不为每个类别重新指定红色，绿色和蓝色值：

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.

这篇关于在悬停时是否可以只更改rgba背景颜色的alpha？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！