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

Question

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

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

要了解其工作原理,请参阅如何将不透明度应用于CSS颜色变量？

如果无法选择自定义属性,请参阅下面的原始答案.

不幸的是,不,你必须为每个单独的类再次指定红色,绿色和蓝色值:

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

Answer 2

如果你愿意,你可以做各种事情以避免硬编码.其中一些方法仅在使用纯白色背景时才有效,因为它们实际上是在顶部添加白色而不是降低不透明度.第一个应该适用于所提供的一切:

• 你还没有使用psuedo-element做某事; 和
• 您可以position在<div>标签上设置为相对或绝对

选项1:::before伪元素:

.before_method{
  position:relative;
}
.before_method:before{
  display:block;
  content:" ";
  position:absolute;
  z-index:-1;
  background:rgb(18, 176, 41);
  top:0;
  left:0;
  right:0;
  bottom:0;
  opacity:0.5;
}
.before_method:hover:before{
  opacity:1;
}

选项2:白色gif叠加:

.image_method{
  background-color: rgb(118, 76, 41);
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/f/fc/Translucent_50_percent_white.png)
}
.image_method:hover{
  background-image:none;
}

方案3:box-shadow方法:

gif方法的一种变体,但可能存在性能问题.

.shadow_method{
  background-color: rgb(18, 176, 41);
  box-shadow:inset 0 0 0 99999px rgba(255,255,255,0.2);
}
.shadow_method:hover{
  box-shadow:none;
}

CodePen示例:http://codepen.io/chrisboon27/pen/ACdka

Answer 3

不,这是不可能的.

但是,如果你想做这种事情,你可以尝试使用CSS预处理器.

从我所看到的情况来看,至少LESS和Sass具有可以使颜色更透明或更少透明的功能.

Answer 4

不,那是不可能的.

如果要使用rgba,则必须将每个值设置在一起.没有办法只改变alpha.

Answer 5

还有一种替代方法，您可以在原始颜色上添加线性渐变背景图像。

a{
  background: green
}
a:hover{
  background-image:linear-gradient(hsla(0,0%,0%,.2) 100%,transparent 100%) // darker
}
a:hover{
  background-image:linear-gradient(hsla(255,100%,100%,.2) 100%,transparent 100%) // lighter
}

另外，使用css3过滤器属性，你也可以这样做，但它似乎会改变文本颜色

a:hover{
   filter: brightness(80%) //darker
}
a:hover{
   filter: brightness(120%) //lighter
}

这是一个jsfiddle：https ://jsfiddle.net/zhangyu911013/epwyL296/2/

Answer 6

它现在是2017年,现在可以实现

CSS自定义属性/ CSS变量(Caniuse)

CSS变量的一个经典用例是能够个性化属性值的某些部分.

所以在这里,我们不再重复整个rgba表达式 - 我们将rgba值拆分或"个别化" 为2个部分/变量(一个用于rgb值,一个用于alpha)

.brown { 
  --rgb: 118, 76, 41; 
}
.green {
  --rgb: 51, 91, 11;
}
.brown, .green {
  --alpha: 0.3;
  background-color: rgba(var(--rgb), var(--alpha));
}

然后,在悬停时我们现在可以修改--alpha变量:

a:hover .green, a:hover .brown {
  --alpha: 1;
}

a {
  display: block;
  position: relative;
}
.brown { 
  --rgb: 118, 76, 41; 
}
.green {
  --rgb: 51, 91, 11;
}
.brown, .green {
  display: inline-block;
  --alpha: 0.3;
  background-color: rgba(var(--rgb), var(--alpha));
  font-size: 40px;
  margin: 20px;
}

a:hover .green, a:hover .brown {
  --alpha: 1;
}

<a href="#">
  <div class="brown">Link 1</div>
</a>
<a href="#">
  <div class="green">Link 2</div>
</a>

Codepen

进一步阅读:

使用CSS变量个性化CSS属性(Dan Wilson)