css prechodová nepriehľadnosť farby pozadia - html, css, css3, css-transition

hľadáte vodítko, ako použiť nepriehľadnosť farby pozadia s prechodom?

Používam rgba() funkcia, ale prechod nefunguje pri vznášaní.

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

Akýkoľvek nápad, ako môžem použiť prechod na .bx?

odpovede:

V skutočnosti, opacity a rgba() sú úplne odlišné.

Pretože používate rgba() ako farba pozadia pri background majetok, budete musieť použiť background ako vlastnosť prechodu takto:

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

Demo JSBin.