nothingness nothingness - 6 months ago 14
CSS Question

How can I make it so the opague style only affects the outer element and not the inner element

I'm trying to make the outer element have an opaque affect and have the inner element remain the same. I tried using important but that didn't work. Here is my code

<h1 id="outer"><div id="inner">Planet</div></h1>


and the css

#outer{
background-color: black;
opacity: 0.8;
}

#inner{
color: white !important;
}


What's the correct syntax for this to work?

Answer

use rgba instead, you can change the opacity of the outer background colour using the alpha channel

#outer{
     background-color: rgba(0,0,0,0.8);
}

to learn more about rgba check this out