webseitenhintergrund verdunkeln (wie bei windows-shutdown)

[rita]

hallo,

ich habe auf vielen webseiten gesehen, dass dort meist eine div-hinweisbox erscheint und währenddessen der hintergrund verdunkelt wird.

dies scheint auch im firefox zu funktionieren, wird also kein ie-only-feature sein...

wer weiß wie man sowas macht?

[goingbacktocali]

ich! hehe ;))

such mal nach opacity im google..

[rita]

genau das ist es schon mal, danke! :)

aber wie färbt man nun die komplette webseite ein und nicht das alertbox-div im vordergrund?

ein div über die komplette seite legen?

[Davok`xarden]

Hi Leute,

aber wie färbt man nun die komplette webseite ein und nicht das alertbox-div im vordergrund?

erstellte die am besten eine 2x2 pixel große gif-Grafik. Die bemalst du dann so:
+--+--+
|xx|  |
+--+--+
|  |xx|
+--+--+

sieht ein bischen bloöd aus aber ich hoffe ihr wiist was gemient ist. Die Flächen mit "XX" sind schwarze pixel der rest ist transprent. Erstelle nun ein div mit diesem bild als background-image. Mit dem Effekt wird der Alpha Kanal eines png-Bildes gefakt un ist so auch im IE verfügbar.

ein div über die komplette seite legen?

enweder mit:
#dein_div {
    position:fixed;
    left:0px; top:0px;
    width:100%; height:100%;
}
oder mit javascript. Javascript benözigst du eh damit du dann mit visibility oder display das div dynamisch ein-/ausblenden kannst.

Mfg Davok`xarden

[Felix Riesterer]

Liebe rita,

dass dort meist eine div-hinweisbox erscheint und währenddessen der hintergrund verdunkelt wird.

etwa wie bei den diversen xyzBoxen?
lightbox
lightbox2
thickbox
oder bei mir (eher eine Verhellung als eine Verdunklung)

In allen diesen Fällen wird ein halbtransparentes (kann man prozentual in einer Bildbearbeitung einstellen) png-Bild über die Seite gelegt. Der IE in Versionen <7 braucht dafür allerdings einen Alpha-Imageloader (siehe die jeweiligen JavaScripte der Boxen), um eine vergleichbare Darstellung zu erreichen. Echte Browser schaffen das aus dem Stand.

Liebe Grüße aus Ellwangen,

Felix Riesterer.