css Übergang Opazität der Hintergrundfarbe

Question

auf der Suche nach Anhaltspunkt, wie die Opazität in Hintergrundfarbe mit Übergang zu verwenden?

Ich verwende rgba() Funktion, aber der Übergang funktioniert nicht auf Hover.

.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> 

Jede Idee, wie ich Übergang für .bx verwenden kann?

Answer 1

Tatsächlich sind opacity und rgba() völlig unterschiedlich.

Da Sie die rgba() als Hintergrundfarbe durch die background Eigenschaft verwenden, müssen Sie background als Übergang Eigenschaft wie folgt verwenden:

.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.