• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Halbtransparent DIV !?

D

D00dle_MH

Neues Mitglied
Hallo,

Ich verstehe nicht, wie man einen Kasten (div) bei HTML machen kann, sodass man das Hintergrundbild dahinter noch sieht,

aber sodass der Kasten ein bisschen dunkler ist.

Soweit bin ich:

<html>
<title>CSS</title>
<style type="text/css">
body{
background-color : black;
}
#kasten1{
opacity : 0.5;
filter : alpha(opacity=30);
-moz-opacity : 0.5;
background-color : #5F5F5F;


}
Zum Vergrößern anklicken....

Aber dann komme ich nicht weiter ! ICh hab mir schon irgendwie 20 Foren angeguckt, und verstehs nicht !
Wer kann mir helfen, und mir ein Beispiel schicken !?
 
Alternativ zu o.g. kannst Du es auch so schreiben:

Code: 
[SIZE=2]body{[/SIZE]
 [SIZE=2]background-color: black;[/SIZE]
 [SIZE=2]}[/SIZE]

 [SIZE=2]#kasten1{[/SIZE]
 [SIZE=2]opacity             : 0.5;[/SIZE]
 [SIZE=2]filter              : alpha(opacity=30);[/SIZE]
 [SIZE=2]background-color: #5F5F5F;[/SIZE]
 position: absolute;
 top: 0;
 left: 0;
 height: 200px;
 width: 500px;
 z-index: 10;
 [SIZE=2]}[/SIZE]

#kasten2 {
 position: absolute;
 top: 0;
 left: 0;
 height: 200px;
 width: 500px;
 z-index: 20;
}

Das "Geheimnis": durch die Verwendung von opacity wird das gesamte Element inkl. aller Child-Element transparent. Wenn man dennoch nicht-transparenten Inhalt darüber anzeigen will, muss man diesen absolut darüber positionieren und nicht mit opacity versehen.
 
Du kannst dir alternativ 1x1px großes PNG als Hintergrund anlegen und dieses mit den üblichen Grafikprogrammen bearbeiten wie du es brauchst. So hast du auch gleich die Farbe mit dem gewünschten Alpha-Wert den du brauchst, ohne lange herumprobieren zu müssen.


lascaux
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben