是否有可能只改变hover的rgba背景颜色的阿尔法？
我有一组不同的rgba背景颜色，但相同的阿尔法。 是否可以编写一个只改变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>hover时改变不透明度，但保持颜色不变。
就像是
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); }
要了解这是如何工作的，请参阅如何将不透明度应用于CSS颜色variables？
如果自定义属性不是选项，请参阅下面的原始答案。
不幸的是，不，你必须为每个单独的类再次指定红色，绿色和蓝色的值：
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的使用也不适合。
不，这是不可能的。
不过，如果你想做这样的事情，你可以试试CSS预处理器 。
从我所看到的情况来看，至lessLESS和Sass都有可以使颜色更多或更less透明的function。
你可以做各种事情，以避免如果你想要硬编码的数字。 其中一些方法只有在使用纯白色背景时才起作用，因为它们确实在顶部添加了白色，而不是减less不透明度。 第一个应该可以正常工作：
- 你还没有使用psuedo元素的东西; 和
- 您可以将
position设置为相对或绝对<div>标记
选项1 ::before psuedo-element ::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
不，这是不可能的。
如果你想使用rgba ，你必须一起设置每个值。 没有办法只改变阿尔法。
我有一个类似的问题。 我有18个不同的divbutton，每个都有不同的颜色。 而不是找出每个的颜色代码或使用div：hoverselect器来改变不透明度（这将影响所有的孩子）我使用伪类：之前像@Chris Boon的答案。
因为我想对各个元素进行着色，所以我使用了：在之前创build一个透明的白色div：hover。 这是一个非常基本的冲突。
#categories div { position:relative; width:100px; height:100px; float:left; border:1px solid black; display:table-cell; } #categories div:before{ content:""; position:absolute; top:0px; left:0px; width:100px; height:100px; } #categories div:hover:before { background-color:white; opacity:0.2; } #a_Particular_Div { background-color:red; }
据CanIUse.com称，截至2014年初，这应该有92％的支持。（ http://caniuse.com/#feat=css-gencontent ）
为什么不使用:hover在hover类中:hover并指定不透明度？
a:hover { opacity:0.6 }
更新：不幸的是，这是不可能的。 你需要写两个独立的select器：
a.green:hover {background-color: rgba(118,76,41,1);} a.brown:hover {background-color: rgba(118,76,41,1);}
根据W3C， rgba属性不具有/支持inherit值。
我面临类似的问题。 这是我做了什么，它的工作正常（ only alpha changes on hover and also the text is not affected ）通过以下步骤：
1）将突出显示的（或任何您select的）类应用到您希望更改背景alpha的任何元素。
2）获取背景颜色rgba
3）将其存储在一个string中，并按照您希望hover的方式（mouseenter和mouseleave）操作（更改alpha）
HTML代码：
<div class="highlighted brown">Link 1</div><br><br> <div class="highlighted green">Link 1</div>
CSS代码：
.brown {background-color: rgba(118,76,41,.8);} .green {background-color: rgba(51,91,11,.8);}
Javascript代码：
$(document).on({ mouseenter: function() { var rgba_str = $(this).css("background-color"); var new_rgba_str ="rgba(" + rgba_str.substring(rgba_str.lastIndexOf("(")+1,rgba_str.lastIndexOf(",")) + ", 0.5)"; $(this).css("background-color",new_rgba_str ); }, mouseleave: function(){ var rgba_str = $(this).css("background-color"); var new_rgba_str ="rgba(" + rgba_str.substring(rgba_str.lastIndexOf("(")+1,rgba_str.lastIndexOf(",")) + ", 0.8)"; $(this).css("background-color",new_rgba_str ); } },'.highlighted');
工作小提琴： http : //jsfiddle.net/HGHT6/1/
你可以用CSSvariables来做到这一点，虽然有点混乱。
首先，按照您要使用的颜色顺序设置一个只包含RGB值的variables：
:root { --color-success-rgb: 80, 184, 60; }
然后，您可以为颜色指定一个RGBA值，并从该variables中提取除alpha值之外的所有内容：
.button--success { background: rgba(var(--color-success-rgb), 0.8); }
这不是非常漂亮，但它可以让你使用相同的RGB值，但不同的颜色alpha值。
有一个替代scheme，您可以将线性渐变背景图像添加到原始颜色。
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 }
另外，用css3filter属性，你也可以这样做，但它似乎会改变文本的颜色
a:hover{ filter: brightness(80%) //darker } a:hover{ filter: brightness(120%) //lighter }
这里是一个jsfiddle： https ：//jsfiddle.net/zhangyu911013/epwyL296/2/
现在是2017年，现在有可能
CSS自定义属性/ CSSvariables （ Caniuse ）
CSSvariables的一个典型用例是个性化属性值的一部分的能力。
所以在这里，我们不是再次重复整个rgbaexpression式，而是将rgba值分解或“个体化”为2个部分/variables（一个用于rgb值，另一个用于alpha）
.brown { --rgb: 118, 76, 41; } .green { --rgb: 51, 91, 11; } .brown, .green { --alpha: 0.3; background-color: rgba(var(--rgb), var(--alpha)); }
然后，hover我们现在可以修改–alphavariables：
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>
这是最简单的方法; 把它放在你的CSS样式表中：
a:hover { color : #c00; }
完成了！
