पृष्ठभूमि रंग की सीएसएस संक्रमण अस्पष्टता

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

एचटीएमएल

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

किसी भी विचार, मैं कैसे .bx के लिए संक्रमण का उपयोग कर सकते हैं?

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।