Transparency of a div, without its interior elements being transparent [duplicated]

Question

Transparency of a div, without its interior elements being transparent [duplicated]

Navigation

#1 by (0 votes)

0

Good!

How do you do to have a div with some transparency, but that its content does not have it?

That is, I was trying to make a page where all its background is an image, and then I wanted to put a navigation menu on top. And this I want to darken, but to continue to see the bottom.

So far, my short experience has told me to apply a opacity , the problem is that now its content is also with that opacity and that does not interest me.

How do you make it so that only the div container has that opacity?

I enclose an image where you see, that the name has a transparency that I do not want, this should look perfectly.

Thank you!

css3 css

asked by NEA 20.08.2017 в 11:37

source

1 answer

Validate chat with PHP, AJAX and MySQL Send mail in app sintra ruby

score 0 · Answer 1

You have to use colors with the value alpha, osea, rgba (red, green, blue, alpha). Opacity modifies all the content while the color rgba does not:

div{
 background:rgba(0, 0, 255, 0.45); 
}

<div>
    <h1>Hola mundo</h1> 
    <p>Esto es un texto</p>
  </div>