CSS 是否可以在悬停时仅更改 rgba 背景颜色的 alpha？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6962432/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to change only the alpha of a rgba background colour on hover?
提问by Fireflight
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>具有不同 rgba 背景颜色但相同 alpha的标签。是否可以编写一个仅更改 rgba 属性不透明度的 css 样式？
A quick example of the code:
代码的一个快速示例：
<a href="#"><img src="" /><div class="brown">Link 1</div></a>
<a href="#"><img src="" /><div class="green">Link 2</div></a>
And the styles
还有款式
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);}
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>鼠标悬停在上面时会改变不透明度，但保持颜色不变。
Something like
就像是
a:hover .green, a:hover .brown {background-color: rgba(inherit,inherit,inherit,1);}
采纳答案by BoltClock
This is now possible with custom properties:
这现在可以通过自定义属性实现：
.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); }
To understand how this works, see How do I apply opacity to a CSS color variable?
要了解其工作原理，请参阅如何将不透明度应用于 CSS 颜色变量？
If custom properties are not an option, see the original answer below.
如果自定义属性不是一个选项，请参阅下面的原始答案。
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); }
You can only use the inheritkeyword alone as a value for the property, and even then the use of inheritisn't appropriate here.
您只能将inherit关键字单独用作属性的值，即使如此，inherit此处也不适合使用。
回答by Chris Boon
You could do various things to avoid having to hard code the numbers if you want to. Some of these methods only work if you use a plain white background as they're really adding white on top rather than reducing opacity. The first one should work fine for everything provided:
如果您愿意，您可以做各种事情来避免对数字进行硬编码。其中一些方法仅在您使用纯白色背景时才有效，因为它们实际上是在顶部添加白色而不是降低不透明度。第一个应该适用于提供的所有内容：
- you aren't already using the psuedo-element for something; and
- you can set
positionto relative or absolute on the<div>tag
- 你还没有使用伪元素做某事；和
- 您可以
position在<div>标签上设置为相对或绝对
Option 1: ::beforepsuedo-element:
选项 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;
}
Option 2: white gif overlay:
选项 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;
}
Option 3: box-shadowmethod:
选项3：box-shadow方法：
A variation of the gif method, but may have performance issues.
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 examples: http://codepen.io/chrisboon27/pen/ACdka
CodePen 示例：http://codepen.io/chrisboon27/pen/ACdka
回答by mercator
回答by thirtydot
No, that's not possible.
不，那不可能。
If you want to use rgba, you must set each value together. There's no way to only change the alpha.
如果要使用rgba，则必须将每个值设置在一起。没有办法只改变 alpha。
回答by Danield
It's now 2017 and this is now possible with
现在是 2017 年，现在可以使用
CSS custom properties / CSS Variables(Caniuse)
CSS 自定义属性 / CSS 变量( Caniuse)
One classic use case for CSS variables is the ability to individualize parts of a property's value.
CSS 变量的一个经典用例是能够个性化属性值的各个部分。
So here, instead of repeating the whole rgba expression once again -
we split up or 'individulaize' the rgbavalues into 2 parts / variables (one for the rgb value and one for the alpha)
所以在这里，不是再次重复整个 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));
}
Then, on hover we can now just modify the --alpha variable:
然后，在悬停时，我们现在可以修改 --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
代码笔
Further reading:
进一步阅读：
Individualizing CSS Properties with CSS Variables (Dan Wilson)
回答by Matrix
simple solution :
简单的解决方案：
a
{
position: relative;
display:inline-block;
background: rgba(red, 0.75);
padding: 20px;
&:before
{
content: ' ';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
&:hover
{
&:before
{
background-color: rgba(#000, 0.25);
}
}
}
exemple : https://jsfiddle.net/epwyL296/14/
示例：https: //jsfiddle.net/epwyL296/14/
just play with alpha of background. if you want light instead of darkness, just replace #000 by #fff
只是玩背景的alpha。如果您想要光明而不是黑暗，只需将#000 替换为#fff
回答by Yu Zhang
there is an alternative,you can add a linear-gradient background image onto the original color.
还有一种选择，您可以在原始颜色上添加线性渐变背景图像。
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
}
also, with css3 filter property,you can do that too,but it seems that it will change the text color
此外，使用 css3 过滤器属性，您也可以这样做，但它似乎会改变文本颜色
a:hover{
filter: brightness(80%) //darker
}
a:hover{
filter: brightness(120%) //lighter
}
here is a jsfiddle:https://jsfiddle.net/zhangyu911013/epwyL296/2/
这是一个jsfiddle：https://jsfiddle.net/zhangyu911013/epwyL296/2/
回答by Diodeus - James MacFarlane
Why not use :hoverand specify a different opacity in the hover class?
为什么不在:hover悬停类中使用和指定不同的不透明度？
a:hover {
opacity:0.6
}
回答by Adam Hollett
You can do this with CSS variables, although it's a little messy.
你可以用 CSS 变量来做到这一点，虽然它有点乱。
First, set a variable containing justthe RGB values, in order, of the color you want to use:
首先，按顺序设置一个仅包含要使用的颜色的 RGB 值的变量：
:root {
--color-success-rgb: 80, 184, 60;
}
Then you can assign an RGBA value for a color and pull everything but the alpha value from this variable:
然后，您可以为颜色分配一个 RGBA 值，并从此变量中提取除 alpha 值以外的所有内容：
.button--success {
background: rgba(var(--color-success-rgb), 0.8);
}
This isn't super pretty, but it lets you use the same RGB values but different alpha values for a color.
这不是非常漂亮，但它允许您对颜色使用相同的 RGB 值但不同的 alpha 值。
回答by Josiah
I had a similar problem. I had 18 different divs working as buttons, and each with a different color. Rather than figure out the color codes for each or use a div:hover selector to change the opacity (which affects all children) I used the pseudo-class :before like in @Chris Boon's answer.
我有一个类似的问题。我有 18 个不同的 div 作为按钮工作，每个都有不同的颜色。而不是找出每个的颜色代码或使用 div:hover 选择器来更改不透明度（影响所有孩子），我使用了伪类 :before 就像@Chris Boon 的回答一样。
Because I wanted to do the coloring on the individual elements, I used :before to create a transparent white div on :hover. This is a very basic washout.
因为我想对单个元素进行着色，所以我使用 :before 在 :hover 上创建一个透明的白色 div。这是一个非常基本的冲洗。
#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;
}
According to CanIUse.com, this should have something like 92% support as of early 2014. (http://caniuse.com/#feat=css-gencontent)
根据 CanIUse.com 的说法，截至 2014 年初，这应该有 92% 的支持。（http://caniuse.com/#feat=css-gencontent）
