Html css 背景颜色的过渡不透明度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18353274/
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
css transition opacity of the background color
提问by faisaljanjua
looking for clue, how to use the opacity in background color with transition?
寻找线索，如何使用带有过渡的背景颜色的不透明度？
I'm using rgba()function, but the transition is not working on hover.
我正在使用rgba()函数，但过渡在悬停时不起作用。
.bx{
background:rgba(255,0,0,0.5);
width:100px; height:100px;
position:relative;
transition: opacity .5s ease-out;
-moz-transition: opacity .5s ease-out;
-webkit-transition: opacity .5s ease-out;
-o-transition: opacity .5s ease-out;
}
.bx:hover{
background:rgba(255,0,0,1);
}
.t{
position:absolute;
bottom:0px;
}
HTML
HTML
<div class="bx"><div class="t">text</div></div>
Any idea, how can I use transition for .bx?
任何想法，我如何使用过渡.bx？
回答by Hashem Qolami
In fact, opacityand rgba()are completely different.
其实opacity和rgba()是完全不同的。
Since you are using the rgba()as the background color by the backgroundproperty, you'll need to use backgroundas transition property as follows:
由于您将rgba()用作background属性的背景颜色，因此您需要使用backgroundas 过渡属性，如下所示：
.bx {
background: rgba(255,0,0,0.5);
width:100px; height:100px;
position: relative;
-webkit-transition: background .5s ease-out;
-moz-transition: background .5s ease-out;
-o-transition: background .5s ease-out;
transition: background .5s ease-out;
}
.bx:hover {
background: rgba(255,0,0,1);
}
