setting opacity on a div, without effecting other divs

Question

I'm trying to set an opacity to my background div, but all the content inside gets an opacity too. I don't want this. I tried to fix it with pseudo elements but it didn't work out, I can fix this problem by adding a second background div and setting a height and position to that div, but I don't want to set a height for a div.

How can I fix this without adding a second div and height?

You can see my demo here

if its the child of the div with opacity you have not a chance to do this (edited my answer) — brandelizer, Dec 22 '15 at 14:03

score 1 · Accepted Answer · answered Dec 22 '15 at 14:03

1

You could always use an RGBA value:

html {
  background-color: red;
}
#login {
  width: 365px;
  background-color: rgba(255, 255, 255, 0.3);
  padding: 37px;
}

https://jsfiddle.net/d2shse4c/2/

answered Dec 22 '15 at 14:03

David Wilkinson

5,060
1
18
32

Easy as that! thanks. – Blank Dec 22 '15 at 14:16

score 0 · Answer 2 · answered Dec 22 '15 at 14:02

What i usually make to do this is sibling divs with position absolute:

<div id="page">
   <div id="content">
      TEXT here
   </div>
   <div id="back" style="position:absolute; opacity:0.5; left:0; top:0; width:100%; height: 100%; background-color:#000000;">
   </div>
   <div id="anotherText" style="position:absolute; width:100px; height: 100px">
   TEXT
   </div>
</div>

and so on....

OR: Set a png background image on the parent div!

As I said in my question. I don't want this. – Blank Dec 22 '15 at 14:14 — Blank, Dec 22 '15 at 14:14

setting opacity on a div, without effecting other divs

2 Answers2