I have created a div with background color black, and written a p inside it with white. When I am using opacity in the div, the color of the p is also getting changed into gray. Is there any way to change the opacity only of the div without affecting the color of the p?

  • 7
    I'm voting to close this question as off-topic because it belongs on StackOverflow – Zach Saucier Jun 30 '15 at 2:59

Just read this article. It explains everything: https://css-tricks.com/rgba-browser-support/

You should have:

div {
     background: rgba(0, 0, 0, 0.5);
     color: #fff; 

There are also same or similar questions here, like this: https://stackoverflow.com/questions/15449280/html-css-text-background-transparent-but-text-not

  • I have tried with Rgba(0,0,0,.6) it is working perfect. But I have to use Opacity. Is there any way to do that using opacity? – Amit Jun 30 '15 at 6:30
  • There is a thread with your question. stackoverflow.com/questions/13248289/…. – Antonija Jun 30 '15 at 9:12

You can use css :after selector to give shadow dom element the background color and opacity. This will not effect to p tag. Here is jsfiddle http://jsfiddle.net/vjandrei/fyvc3ejy/2/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.