opacità di transizione css del colore di sfondo

Question

alla ricerca di indizio, come utilizzare l'opacità nel colore di sfondo con la transizione?

Sto usando la funzione rgba(), ma la transizione non funziona su 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> 

Qualsiasi idea, come posso utilizzare transizione per .bx?

Answer 1

Infatti, opacity e rgba() sono completamente diversi.

Dal momento che si sta utilizzando il rgba() come colore di sfondo dalla proprietà background, è necessario utilizzare background come proprietà di transizione come segue:

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