🤩 New Cool Developer Tools for you. Explore →
FREE JavaScript Video Series Start Learning →
FLAT 75% OFF All Interactive courses at flat ₹250 / $3.25 only. HURRRRRY!! Explore now
  Signup/Sign In
Tests
MCQs to test your knowledge.
Forum
Engage with the community.
Compilers
Compilers to execute code in browser.
← Back to Questions
Ask Question
Not satisfied by the Answer? Still looking for a better solution?
Ask Question

CSS Background Opacity

I am using something similar to the following code:

<div style="opacity:0.4; background-image:url(...);">

    <div style="opacity:1.0;">

        Text

    </div>

</div>

I expected this to make the background have an opacity of 0.4 and the text have 100% opacity. Instead, they both have an opacity of 0.4.
opacity css html
by

3 Answers

aashaykumar
Children inherit opacity. It'd be weird and inconvenient if they didn't.

You can use a translucent PNG file for your background image, or use an RGBa (a for alpha) color for your background color.

Example, 50% faded black background:


<div style="background-color:rgba(0, 0, 0, 0.5);">

   <div>

      Text added.

   </div>

</div>
kshitijrana14
You can use CSS 3 :before to have a semi-transparent background and you can do this with just one container. Use something like this

<article>

  Text.

</article>

Then apply some CSS

article {

  position: relative;

  z-index: 1;

}



article::before {

  content: "";

  position: absolute;

  top: 0; 

  left: 0;

  width: 100%; 

  height: 100%;  

  opacity: .4; 

  z-index: -1;

  background: url(path/to/your/image);

}
sandhya6gczb
Either use a semi-transparent PNG image or use CSS 3:


background-color: rgba(255, 0, 0, 0.5);

Login / Signup to Answer the Question.

LoginSignup