0

So, I learnt about opacity and all and then started experimenting, I wanted to put an image as a background and then use div's with a white background to type in, but I wanted them a little transparent so I could still see the background a little. When I tired it I noticed that the text inside the div is getting transparent along with the white div. What I first tried was putting the text in a paragraph and then in the div but again it went transparent.

Here's the code:

CSS:

body {
        background-image: url("URL here");
      }

div {
width: 300px;
height: 300px;
background-color: white;
opacity: 0.4;
margin: auto;
}

HTML:

<div>
Hello everyone!
</div>

And here's what I'm talking about: https://jsfiddle.net/jnzjuo0x/

TNEG
  • 1
  • 1
  • [This](http://stackoverflow.com/questions/15449280/html-css-text-background-transparent-but-text-not) is a better duplicate since you have a plain colour background. – Quentin Aug 30 '16 at 13:34
  • @Quentin closed this question, so I can only give you a "comment." As you've seen, `opacity` affects the entire element, not just its background. *Necessarily* a child element's opacity will be limited by its parent's opacity - if you think about that, it's really what you want - things would get very confusing otherwise. You can get the effect you're after by instead using an `rgba` value for the background color (that's `rgba(red value, greenvalue, blue value, alpha (opacity) value)`). Here's your fiddle updated: https://jsfiddle.net/jnzjuo0x/1/ – henry Aug 30 '16 at 13:35
  • Oh heh @Quentin I wrote that comment when you'd closed the question but before you linked the duplicate – henry Aug 30 '16 at 13:37

0 Answers0