背景色の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私は.bxの移行をどのように使用できるかを

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

任意のアイデア、？

Answer 1

実際には、opacityとrgba()は完全に異なります。

あなたはbackgroundプロパティで背景色としてrgba()を使用しているので、あなたは、次のように遷移プロパティとして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を。