[felisse.courage]

hallo leute!

für meine seite hätte ich gern, dass sich beim klick auf einen link ein element öffnet, bspw. ein transparenter schwarzer div-container, der sich über die gesamte seite (width, height: 100%) spannt, und sozusagen wie ein schleier über der website liegt.

zur veranschaulichung dieses bild (photoshop):


welche CSS-eigenschaften müsste ich dem element zuweisen, damit es genau das macht? also ich brauche nur den css-code, dass das ding per klick aufgehen soll und so ist nicht das problem.

mein vorschlag:

//irgendwas mit
.schleier {

width:100%;
height:100%;

position:?;
z-index:?;

background:black;

opacity:0.60;
filter:alpha(opacity=60);
-moz-opacity:0.6;

}

ich hoffe, dass das geht! aber ich denke doch...also vielen vielen dank schon mal! ich bin gespannt...

...felix

Dieser Beitrag wurde von felisse.courage bearbeitet: 09. Juni 2007 - 16:00

[tobiasndw]

position:absolute;
z-index:1;


Als Transparenz würde ich allerdings ein Gif-Bild in den Hintergrund des DIVs legen welches aus 1 Pixel Kästchen besteht wobei immer abwechseln 100% Transparenz bzw 1 Farbe abwechselt, damit die "Transprenz" auch in jedem Browser dargestellt werden kann.

[MNG]

Entweder mit dem GIF-Raster, wie von tobiasndw beschrieben, oder mit einem PNG mit Transparenz. Das verstehen eigentlich alle Browser bis auf IE < 7. Dazu dann für die Ebene

width:100%;
height:100%;

position: absolute; left: 0px; top: 0px;
z-index:999;

background-color: transparent;
background-image: url('pfad/zu/dem/bild');

Den Z-Index halt einfach höher als alle anderen auftretenden Z-Indizes.

[Witi]

Kurze Frage...

Zitat

damit die "Transprenz" auch in jedem Browser dargestellt werden kann.

Wenn ich mich nicht täusche interpretieren das alle gängigen Browser.

opacity:0.60; filter:alpha(opacity=60);

oder doch nicht?

[axx]

Zitat (Witi: 10.06.2007, 14:11)

Wenn ich mich nicht täusche interpretieren das alle gängigen Browser.

opacity:0.60; filter:alpha(opacity=60);

oder doch nicht?

Richtig, das erste für Mozilla und KHTML, das zweite für IE. Wobei opacity nicht in CSS 2.1 enthalten ist, sondern erst in CSS 3 eingeführt werden soll. Da sind die Browserhersteller mal wieder schneller als das W3C.