How top apply css opacity only to background without affecting the text ?

 You can achieve this by using rgba() function for your div background

rgba(R, G, B, A)

R (red), G (green), and B (blue) can be either <integer>s or <percentage>s, where the number 255 corresponds to 100%. A (alpha) can be a <number> between 0 and 1, or a <percentage>, where the number 1 corresponds to 100% (full opacity).


RGBa example

background: rgba(51, 170, 51, .1)    /*  10% opaque green */
background: rgba(51, 170, 51, .4)    /*  40% opaque green */
background: rgba(51, 170, 51, .7)    /*  70% opaque green */
background: rgba(51, 170, 51,  1)    /* full opaque green */

Post a Comment

Previous Post Next Post