相关疑难解决方法(0)

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

使用纯 CSS如何使 RGB 变亮，例如：rgb(255, 0, 0)

SASS 的lightenmixin 运行良好：lighten(rgb(255, 0, 0), 25%)但是它不支持这样的 CSS 变量：lighten(var(--redColor), 25%)

我需要使用 CSS 变量，因为您可以在页面加载后动态更改 CSS 变量。

我尝试过的事情

1. opacity: 0.75- 不透明度使背景渗入我不想要的颜色。
2. filter: brightness(- 滤镜影响整个元素，但我只想淡化特定颜色。
3. hsl(0, 100%, 50%)- HSL 看起来很有希望，但我需要一种将 RGB 转换为 HSL 的方法来减轻 RGB 的亮度。

理想情况下，我希望有一个 SASS mixin，它可以执行一些 CSS 来减轻传递到其中的任何颜色。