Transp. divs verschachteln (Fenstereffekt)

[mrpaule]

Hallo, ich zermatere mir schon seit ein paar Tagen das Hirn für eine css Lösung einer Idee. Also ich habe in einem div-Container ein wechselndes HG-Bild, das sich in height und width skaliert. Darüber in einem Container einen transparenten Grau-Schwarzverlauf, um das Motiv abzuschwächen. In diesem Verlauf bräuchte ich einen Container, der mir das darunterliegende Bildmotiv (in diesem Ausschnitt) wieder ohne Transparenz freimacht. Anderes Beispiel: Eine leicht transparente Zimmerwand mit einem Fenster. Die Außenumgebung sieht man abgeschwächt durch die Wand und im Fenster dann wieder klar. Ich kann den HG leider nicht mit dem Verlauf und einem klaren Bereich anlegen, weil die Motive sich in Breite und Höhe anpassen und der Innenrahmen (Fenster) sich auf dem Bildschirm mittelt. Somit verliert sich beim Skalieren ständig die Deckung. Ich habe es schon mit verschachtelten divs versucht, kann aber die Transparenz nie durchbrechen (ausschneiden). Gibt es da eine css-Lösung - ich komme auf keine Idee mehr. Vielen Dank im Voraus! mrpaule

 

[Tronjer]

Anderes Beispiel: Eine leicht transparente Zimmerwand mit einem Fenster. Die Außenumgebung sieht man abgeschwächt durch die Wand und im Fenster dann wieder klar. Ich kann den HG leider nicht mit dem Verlauf und einem klaren Bereich anlegen, weil die Motive sich in Breite und Höhe anpassen und der Innenrahmen (Fenster) sich auf dem Bildschirm mittelt. Somit verliert sich beim Skalieren ständig die Deckung. Ich habe es schon mit verschachtelten divs versucht, kann aber die Transparenz nie durchbrechen (ausschneiden). Gibt es da eine css-Lösung - ich komme auf keine Idee mehr. Vielen Dank im Voraus! mrpaule

Du könntest in HTML mit z-index und in CSS mit rgba arbeiten. Allerdings sind ältere IE-Versionen nicht in der Lage, Transparenzen darzustellen. Was diesen Fenstereffekt betrifft, so stand ich stand vor einiger Zeit vor einem ähnlichen Problem mit einer Hintergrundgrafik und habe das letzendlich in Photoshop gelöst.

Gamestore

 

[mrpaule]

Hallo Tronjer,

danke für Deine Antwort!

Technisch ist das mit Transparenz (rgba und z-index) schon klar. Das klappt auch alles mit den aktuellen Browsern. Das Problem ist eben dieses Fenster, welches quasi den "Verlauf-Vorhang" des darunterliegenden divs "ausschneiden" müsste.

Es ist kein Problem das Ganze im PS fertig anzulegen. Problem ist "nur", dass sich meine divs verschieben und somit die Positionen veränderlich sind und die Deckung sich dann verschiebt. Diese "harte" Löund würde funktionieren, wenn ich eben alles links oben positioniere und mit festen Höhen/Breiten arbeite. Variabel, also sich der Bildschirmauflösung anpassend wäre halt schöner und zeitgemäßer.

Ich dachte anfangs die Kind-Vererbung bei den divs wäre die Lösung und ich hatte auch gelesen, dass zwei transparente divs übereinander sich beeinflussen - sich also der Alphawert irgendwie addiert. Aber ich bräuchte ja quasi eine Subtraktion. Das ganze irgendwie als Polymer anzulegen habe ich auch nicht geschafft, da man zwar Formen per Eckkoordinaten anlegen kann, aber ich quasi eine Doppelform (Außenrand, Innenrand) habe.

Hat noch jemand eine Idee?
Danke & Grüße
mrpaule

 

[Tronjer]

Ohne die Site zu sehen, ist das etwas schwer vorstellbar.

Also, du hast ein Hintergrundbild mit 0% Transparenz, darüber einen Layer, der das Hintergrundbild halbwegs transparent stellt, und darüber wieder ein Textfeld, durch welches das Bild quasi ungefiltert hindurch scheinen soll?

Sofern du das Hintergrundbild in PS auf die gewünschte Transparenz bringst, wäre die Layerebene obsolet, und du müsstest dann lediglich für die Textbox einen nicht-transparenten Ausschnitt des selben Bildes als Hintergrund definieren. Aus dem Grunde hatte ich den Link gepostet, auch wenn bei mir über diesem Ausschnitt kein Text mehr liegt.

Die Problemstellung ergäbe sich dadurch, dass beim Wechsel des Hintergrundbildes im Body auch das Hintergrundbild der Textbox ausgetauscht werden muss, und das wiederum lässt sich mit JavaScript realisieren.