[CSS] Div blijft doorzichtig?

Hoi,

Ik probeer een overlay te maken voor een login scherm, ik heb dus een div #overlay:

Codeblok (voorbeeld.php):

1
2
3
4
5
6
7
8
9
10
11
12
13

#overlay {
width:100%;
height:100%;
position:absolute;
z-index:10;
top:0;
left:0;
background-color:#000;
filter: alpha(opacity=75);
-moz-opacity: 0.75;
-o-opacity: 0.75;
opacity: 0.75;
}

Die zorgt ervoor dat er een donkere achtergrond is met wat doorzichtigheid, alleen heb ik nu een andere div die in #overlay zit:

Codeblok (voorbeeld.php):

1
2
3
4
5
6
7
8
9
10

#overlay_signin {
width:750px;
height:260px;
background-color:#fff;
margin:70px auto;
z-index:11;
box-shadow: 2px 2px 5px rgba(204, 204, 204, 3);
padding:5px;
border-radius:2px;
}

Nu is het zo dat #overlay_sign in ook doorzichtig is:
Nu wil ik dus dat #overlay doorzichtig blijft maar #overlay_signin niet, die moet dus geen doorzichtigheid hebben.

Ik heb al geprobeerd om #overlay_signin een opaticy te geven van 0 of 1 maar dat werkte ook niet. Ook heb ik geprobeerd om een container te maken (netzoals one2xs) alleen dan blijft #overlay_signin nog steeds doorzichtig.

Hoe kan ik zorgen dat #overlay_signin niet meer doorzichtig is?

TL;DR
Je moet niet opacity gebruiken maar een rgb achtergrond geven. Die heeft al de functie om doorzichtigheid te bepalen.

Stefvdwel schreef:

TL;DR

Je moet niet opacity gebruiken maar een rgb achtergrond geven. Die heeft al de functie om doorzichtigheid te bepalen.

Danku!

En wat je anders had moeten doen is