Transparenzeinstellung des Parents überschreiben?

multimolti

multimolti

Erfahrenes Mitglied
Hallo!

Ich habe eine Website designt und, um das Hintergrundbild besser zur Geltung zu bringen, den eigentlichen Inhalt zu 20% transparent gemacht, also die Opacity auf 80% gesetzt. Das hat sowieso nur so lala geklappt, aber bei Bildern sieht es richtig dreckig aus.

Das Haupt-div meiner Website hat folgenden CSS-Code drin:

Code: 
	filter:alpha(opacity=80);
	opacity: 0.8;
Das mit dem "filter" für den IE und für alle anderen Browser "opacity". Firefox und Chrome (Safari und Opera hab ich noch nicht getestet) übernehmen die Opacity auch für alle untergeordneten Elemente, der IE übernimmt den Filter aber nur für das momentane.

1. Wie kann ich das bei allen Browsern gleich hinbekommen?

Und was nervt ist dass ALLE untergeordneten Elemente transparent werden, d..h. auch Bilder.

2. Wie kann ich bei denen die Transparenz überschreiben? Einfach in der img-CSS-Klasse Opacity und Filter auf 1 bzw. 100 zu setzen hilft leider nicht.

Danke!
 
Hi,

die Transparenz-Vererbung an die Nachfolger-/Kindelemente lässt sich da nur mit einem transparenten PNG-Hintergrundbild vermeiden.

mfg Maik
 
Und zwar wie?

EDIT:
Oder meinst du dass mein Haupt-div ein PNG mit 80% Deckkraft als Hintergrund bekommt und ich dafür diese Opacity/Filter-Sache komplett weglasse? Das würde Sinn ergeben, aber damit ein weiteres div (mit einer Hintergrundfarbe), in dem dann der eigentliche Text steht, auch transparent ist müsste ich das wieder und wieder machen, oder?
 
Jo, so meinte ich das :)

Aber sollten seine untergeordneten Elemente (Nachfolger-/Kind) nicht ohne Transparenz erscheinen?

Ansonsten nutzt du dort ebenso einen PNG-Hintergrund, damit nicht die Schriftfarbe des Textes die Transparenz erbt ;)

mfg Maik
 
Ich würde den Krams ja hochladen und dir zeigen, aber leider ist die Datenbank irgendwie offline, also muss ein Screenshot reichen.

example.jpg

Das dunkelgraue ist mein Haupt-div, das hellgraue ein div für jeden Beitrag. Die sollen beide auf jeden Fall transparent werden. Auch dass die Schrift leicht transparent ist sieht cool aus habe ich rausgefunden, darauf kann ich aber notfalls auch verzichten. Nur das Bild muss 100% deckend sein, man sieht da ja recht eindeutig den Hintergrund durch und besonders beim Scrollen sieht das bescheuert aus (weil der Hintergrund fixed ist).

EDIT:
Aber das eigentlich alles transparent ist sieht schon echt gut aus. Auch die Kommentar-Textarea und der Absende-Button sind etwas durchsichtig, das möchte ich behalten =)
 
Zuletzt bearbeitet:
Jo, mit einem semitransparenten PNG-Hintergrundbild erscheint das Bild transparenzlos :)

mfg Maik
 
Ohne das transparente PNG-Hintergrundbild für das Haupt-DIV gibt es kein transparenzloses Bild in einem seiner nachfolgenden / untergeordneten DIV-Blöcke.

mfg Maik
 
Es steht dir vollkommen frei, für das Haupt-DIV das transparente PNG-Hintergrundbild zu verwenden, und auf die nachfolgenden DIVs die opacity-Eigenschaft anzuwenden, deren Inhalte (Texte, Formular-Steuerelemente, u.ä.) eine Transparenz annehmen sollen ;-)

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück