css轉換不透明度的背景顏色

Question

尋找線索，如何使用背景顏色的不透明度與轉換？

我使用的是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

<div class="bx"><div class="t">text</div></div> 

任何想法，我怎麼可以使用.bx過渡？

Answer 1

實際上，opacity和rgba()是完全不同的。

由於您使用的是rgba()由background財產的背景顏色，你需要使用background過渡性質如下：

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

JSBin Demo。