Przejściowość przejścia css koloru tła - html, css, css3, css-transitions

szukasz wskazówki, jak używać krycia w kolorze tła z przejściem?

Używam rgba() funkcja, ale przejście nie działa na zawisie.

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

Jakikolwiek pomysł, jak mogę użyć przejścia dla .bx?

Odpowiedzi:

W rzeczywistości, opacity i rgba() są zupełnie inne.

Ponieważ używasz rgba() jako kolor tła przez background nieruchomości, musisz użyć background jako właściwość przejścia w następujący sposób:

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