# Transparenzeinstellung des Parents überschreiben?



## multimolti (24. Juni 2010)

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:


```
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!


----------



## Maik (24. Juni 2010)

Hi,

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

mfg Maik


----------



## multimolti (24. Juni 2010)

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?


----------



## Maik (24. Juni 2010)

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


----------



## multimolti (24. Juni 2010)

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




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 =)


----------



## Maik (24. Juni 2010)

Jo, mit einem semitransparenten PNG-Hintergrundbild erscheint das Bild transparenzlos 

mfg Maik


----------



## multimolti (24. Juni 2010)

Siehe bitte nochmal meinen Edit oben


----------



## Maik (24. Juni 2010)

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


----------



## multimolti (25. Juni 2010)

Nagut, danke, ich werde es morgen mal  versuchen und mich dann hier wieder melden.


----------



## Maik (25. Juni 2010)

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


----------



## multimolti (25. Juni 2010)

Vielen Dank nochmal, funktioniert jetzt und weil die DB wieder da ist auch online: http://www.multimolti.com/thailand/

Habe das äußere div und das Post-div wie vorgeschlagen mit transparenten PNGs gemacht, Text und Bild sind daher schön deckend, und unten die Kommentarsektion mit Opacity bzw. Filter auch transparent gemacht. Musste leider ein bisschen pfuschen, damit das alles hinhaut (die Transparenz ist manchmal 20% und manchmal 60% und die Farbcodes habe ich auch geändert), aber zumindest im FF, Chrome und IE 8 sieht es gut aus.

Hat jemand noch einen IE 7 oder 6 um das da auch mal zu testen? Wär nett, danke!


----------



## chmee (25. Juni 2010)

Offtopic zum Thema, aber Ontopic zur Seite : Ich sehe öfter solche WP-Kodierungsprobleme, vornehmlich in Überschriften. Was ist das? Serverseitig oder mein Client (FF 3.6.4)?




mfg chmee


----------



## multimolti (25. Juni 2010)

oO das scheint dein Client zu sein. Hab das noch nie gesehen, und ich betreibe 3 WP-Blogs. Hier mit FF 3.6.4, Chrome 5.0.375.70 und IE 8 sieht es überall gleich und korrekt aus.

EDIT:
Was mir noch einfällt: Das Hintergrundbild ist 1600x1200, damit man mit sehr hoher Wahrscheinlichkeit keine weißen Ränder sieht (außer jemand kommit 1080p und nem maximierten Browser daher), und auf 95% oder so abgespeichert und daher 260kb groß. Soll ich das noch kleiner machen (also auf 85% z.B.) oder geht das so?


----------



## Maik (25. Juni 2010)

multimolti hat gesagt.:


> Hat jemand noch einen IE 7 oder 6 um das da auch mal zu testen? Wär nett, danke!


Hab hier im Geschäft nur IE6 zur Verfügung, und für den mußt du noch Hand anlegen, da er bekanntermaßen keine transparente PNGs darstellen kann.

Mögliche Workarounds bieten hier beispielsweise:


Cross-browser semi-transparent backgrounds
http://code.google.com/p/ie7-js/

mfg Maik


----------



## multimolti (25. Juni 2010)

Hab das mal eingebaut, klappt es jetzt? http://multimolti.com/thailand/


----------



## Maik (25. Juni 2010)

Was genau hast du eingebaut? Im IE6 sind die Hintergrundbilder überhaupt nicht mehr zu sehen.

mfg Maik


----------



## multimolti (25. Juni 2010)

Dreckig. Eigentlich habe ich genau das eingebaut, was der erste gepostete Link gesagt hat (mit dem komischen DX-Alpha-Hook und so). Im FF, Chrome und IE8 sah alles noch gleich aus...
Aber erst mal hab ich irgendeinen Mist mit der htaccess angestellt, ich sehe zumindest nur noch eine weiße Website.


----------



## Maik (25. Juni 2010)

multimolti hat gesagt.:


> Aber erst mal hab ich irgendeinen Mist mit der htaccess angestellt, ich sehe zumindest nur noch eine weiße Website.


Da bist du nicht alleine 

mfg Maiki


----------



## multimolti (25. Juni 2010)

Maaaan, was ist da los Ich hab in WP die Permalinks umgestellt, sodass er das Format _2010/06/25/Das-ist-der-Titel_ nimmt, und dann müsste er ja eigentlich die .htaccess schreiben. Leider ist aber keine da, die ich löschen könnte, und der Quelltext der leeren Seite sagt mir "500 - Interner Serverfehler". Und jetzt?

Internal Server Error ist gefixt, jetzt kannst du mir sagen warum du mit dem IE6 nichts siehst =)

Hab es eigentlich wie im Beispiel gemacht:


```
.post {
	/* Mozilla ignores crazy MS image filters, so it will skip the following */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='../img/bg_light.png');
}

.post[class] {
	background-image: url('../img/bg_light.png');
}
```
Die normale CSS-Klasse ist für den alten IE, und die mit [class] ist für die anderen Browser.


----------



## Maik (25. Juni 2010)

Versuch es mal mit dieser Pfadangabe, denn entgegen der gewöhnlichen Referenzierung vom CSS aus betrachtet, bezieht sie sich hier vom HTML-Dokument aus: 

```
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='img/bg_light.png');
```

mfg Maik


----------



## multimolti (25. Juni 2010)

Habe es mal geändert, aber ich glaube nicht dass das hilft, weil das Bild weiter vom Dokument selber entfernt ist, nämlich hier:


> http://multimolti.com/thailand/wp-content/themes/multimolti_thai/img/bg_dark.png


Eigentlich brauche ich jetzt einen absoluten Pfad, weil die einzelnen Seiten jetzt ja z.B. über 


> http://multimolti.com/thailand/2010/06/24/neuer-blog/


aufgerufen werden. Irgendwie war es aber möglich, das zu umgehen meine ich.


----------



## Maik (25. Juni 2010)

Lad mal eine der beiden korrekten Pfad-Varianten (absolut / relativ) hoch, denn wenn mein angenommener relativer Pfad so nicht stimmt, ergibt es wenig Sinn, dies so   hochzuladen.

mfg Maik


----------



## multimolti (25. Juni 2010)

Gut, jetzt sind bei beiden Grafiken die absoluten Pfade drin.


----------



## Maik (25. Juni 2010)

Wunderprächtig 




mfg Maik


----------



## multimolti (25. Juni 2010)

Sexy ;-) Hmm, glaubst du viele Leute mit 1650x... oder 1920x... nutzen den Browser maximiert? Aus eigener Erfahrung dachte ich, mehr als ca. 1400 in der Breite nutzt eh niemand, daher reicht das Hintergrundbild mit 1600x..., aber bei dir sieht man ja schon die Balken.

Und mit der absoluten Lösung ist das jetzt nicht mehr so flexibel als dass ich das Theme auf Wordpress.org hochladen könnte...


----------

