Div-Opacity für image aufheben!

[Raua]

Hallo Leute
ich schreib grad ne homepage für nen freund und baue die mit so div kästchen auf. Als body hintergrundbild hab ich ein muster genommen und das maindiv hab ich silbern eingefärbt und mit opacity lass ich den bg durchschimmern. Das Problem ist jetz aber dass auch bilder die in diesem maindiv sind hab durchsichtig werden. Im IE hab ich das problem gelöst, indem ich einfach beim img als position: relative; angegeben habe, dann macht er nicht mehr durchsichtig. In Firefox und Chrome funzt das aber nicht, da schimmert das muster immer noch durch. Könnt ihr mir bitte helfen??

lg JR

 

[T!P-TOP]

Opacity vererbt sich auch auf alle anderen Elemente. Gib den Maindiv position absolute, damit nimmst du es aus dem Fluss, alle anderen Elemente (header, footer Bilder usw) bekommen position relative - dann müsste das Opacity nur auf den Maindiv greifen.

Habs nicht getestet, aber vielleicht funktioniert es auch mit dem z-index. Gib zB den Maindiv nen z-index von 20 oder so.

Grüße,
T!P-TOP

 

[Space Vampire]

da es sich nur um ein einziges element handelt, würde ich hier opacity-regel völlig vermeiden und stattdessen ein halbtransparentes PNG als hintergrundbild für das element nutzen

 

[Raua]

danke für die Hilfe. Der Vorschlag von T!P-Top funktioniert nicht aber der mit dem png find ich sehr gut!

danke JR

 

[T!P-TOP]

PNGs (transparente) werden im IE6 komplett fehlerhaft angezeigt, Transparente Flächen werden einfach grau gefärbt was gar nicht gut aussieht - anderseits wird opacity als Fehler eingestuft, was z.B.: deine Technik bei Seitenreport - Die Website Analyse / SEO zumindest verschlechtert.

Dem transparenten Element musst Du absolute geben, den anderen Elemente relativ, bei mir hats einwandfrei funktioniert, und zwar auch in allen anderen Browsern - wenn das bei dir nicht der Fall ist, machst du es wohl falsch.

 

[Space Vampire]

ist der IE6 wirklich noch relevant?
in diesem fall würde ich lieber die paar % IE6 mit unschöner farbe in kauf nehmen, bevor ich mit absoluten und relativen positionierungen arbeite und eine, selbst in aktuellen(!) browsern, unzureichend unterstützte eigenschaft nutze.