Menu
I'm trying to reset the opacity to 1.0 for 'Demo text 4' where its container has opacity set to 0.3. I read that I could set the text directly using: color: rgba(255, 255, 0, 1); but this will not work for me. Is there a way to achieve my goal?
<!DOCTYPE html> <html lang="en"> <head> <style> #text_holder { background: blue; width: 500px; height: 200px; } #text_holder2 { background: blue; width: 500px; height: 200px; color: rgba(255, 255, 0, 1); } #alpha_30 { opacity: 0.3; color: #ff0000; } #alpha_100 { color: #ff0000; } </style> </head> <body> <div id="alpha_100"> <div id="text_holder"> <p>Demo text 1</p> </div> </div> <div id="alpha_30"> <div id="text_holder"> <p>Demo text 2</p> </div> </div> <div id="alpha_30"> <div id="text_holder"> <p>Demo text 3</p> </div> <div id="text_holder2"> <p>Demo text 4</p> </div> </div> </body> </html> 
580
Answer: Use the CSS RGBA colors There is no CSS property like "background-opacity" that you can use only for changing the opacity or transparency of an element's background without affecting its child elements.
Opacity is not inherited, but because the parent has opacity that applies to everything within it. You cannot make a child element less transparent than the parent, without some trickery. Values are a number from 0 to 1 representing the opacity of the channel (the “alpha” channel).
The percentage of opacity is calculated as Opacity% = Opacity * 100 To set the opacity only to the background and not the text inside it. It can be set by using the RGBA color values instead of the opacity property because using the opacity property can make the text inside it fully transparent element.
To adjust layer opacity:Select the desired layer, then click the Opacity drop-down arrow at the top of the Layers panel.
you cannot.
If you use a plain background-color, then yes use rgba instead.
#text_holder { background:rgba(0, 0, 255,1); width: 500px; height: 200px; } #text_holder2 { background: rgba(0, 0, 255,1);; width: 500px; height: 200px; color: rgba(255, 255, 0, 1); } #alpha_30 > div {/* select child */ /*opacity: 0.3;*/ background:rgba(0, 0, 255,0.3);/* give opacity to bg color only */ color: #ff0000; } #alpha_100 { color: #ff0000; } For an image as background, you may fake is opacity by using the main background-color in rgba. if you want an opacity of 0.3 for background, then do 1 -0.3 = 0.7 to set your rgba opacity.
<div class="bg-img"> <p class="text_holder"> some text</p> </div> .bg-img { background:url(http://lorempixel.com/100/100/abstract); } .bg-img .text_holder { background:rgba(255,255,255,0.3);/* here white cause body as white background */ } These are work around : DEMO of both (bg image at bottom of test): http://codepen.io/anon/pen/yGgpz
83
Use rgba(225, 0, 0, .3) for the parent div.
Stack Snippets example:
.opaque { width: 500px; height: 500px; text-align: center; color: black; background: rgba(225, 0, 0, .5); }<div class="opaque">This text is not opaque</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
