仅更改 css 类中 rgba 的“a”

Posted 2023-02-21

【中文标题】仅更改 css 类中 rgba 的“a”

【英文标题】：Changing only the 'a' of rgba in a css class

【发布时间】：2014-12-18 18:28:01

【问题描述】：

我有一个可以确认某些元素的应用。创建它们时，它们默认为未确认，然后再被确认。它们可以属于另一个 A 类或 B 类。

如果它们属于 A，我有一个 css 规则是

.a 
   background-color: red

如果它们属于B，则css是规则

.b 
   background-color: blue

现在我有未确认和确认的课程。如果确认，这些类添加 1.0 的不透明度，如果未确认，则添加 0.5。我的问题是 .5 也会影响元素上的文本，这使得阅读起来很麻烦。

理想情况下，我可以拥有类似的东西 。一种 背景色：rgba (255,0,0,X)

是否可以仅在另一个类上覆盖 alpha 值？我不想为 .confirmed 或 .unconfirmed 类分配颜色，因为它可以根据类是 .a 还是 .b 而改变。

【问题讨论】：

Is it possible to change only the alpha of a rgba background colour on hover? 的可能重复项

不，不能只更改 alpha。

回应cmets。我不想要黑色背景......它需要根据班级，红色或蓝色而改变（查看......问题......）。这个问题与悬停时的rgba无关，但我想本质上是相似的。 @dfsq 谢谢。任何可能的解决方法？

1.您可以使用预处理器。 2.你可以使用javascript。

@misterManSam 我想这是真的。需要缩小我的头在那里。谢谢。

【参考方案1】：

您不能只覆盖背景 Alpha 通道。好东西你不需要:)

只需组合您的类选择器来设置组合样式，例如：

.a.unconfirmed 和 .a.confirmed

示例

div 
  display: inline-block;

.a.unconfirmed 
  height: 100px;
  width: 100px;
  background: rgba(255, 0, 0, 0.5);

.a.confirmed 
  height: 100px;
  width: 100px;
  background: rgba(255, 0, 0, 1);

.b.unconfirmed 
  height: 100px;
  width: 100px;
  background: rgba(0, 0, 255, 0.5);

.b.confirmed 
  height: 100px;
  width: 100px;
  background: rgba(0, 0, 255, 1);

<div class="a confirmed">Confirmed</div>
<div class="a unconfirmed">Unconfimed</div>

<div class="b confirmed">Confirmed</div>
<div class="b unconfirmed">Unconfimed</div>

【讨论】：

这是一个事后看来超级 20/20 的例子哈哈，但我相信会帮助深夜编码人员 =P。感谢您的回答和sn-p。