nothingness nothingness - 1 year ago 128
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

background-color: black;
opacity: 0.8;

color: white !important;

What's the correct syntax for this to work?

Answer Source

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

     background-color: rgba(0,0,0,0.8);

to learn more about rgba check this out