nicht angemeldet
Transparenz ohne Beeinflussung der unterobjekte
Hi,
was ich machen möchte ist per CSS einen Hintergrund anlegen der einfarbig über einem Foto liegt und leicht transparent ist.
Auf diesem transparenten Hintergrund sollen Text und Bilder erscheinen (ist für News gedacht, die teilweise auch mal ein Bild beinhalten).
Normalerweise wird die Transparenz aber für alle Unterobjekte mitübernommen. Was beim Text noch zu verkraften ist, nervt natürlich bei Bildern.
NUn habe ich schon diese Lösung gefunden:
http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/
Allerdings erscheinen die Bilder (wenn ich es im IE8 anwende.. vielleicht auch im IE7) nicht mehr.. bzw nur als Loch im Transparenten HIntergrund mit Bilck auf das Foto in der untersten Ebene).
Im Firefox funktioniert die Lösung, allerdings kommt da ja auch (wie im verlinkten Beispiel zu sehen) ein ganz anderer Browserfilter zum Einsatz.
Ist das nun ein allgemeiner Bug im IE und somit leider nutzlos oder mache ich etwas falsch?
Reiner Text ist übrigends kein Problem.. der erscheint in allen Browsern mit 100%, also ohne Transparenz.
Gibt es noch andere Möglichkeiten mein Problem zu lösen?
Danke für jede Hilfe,
Marc
-
Der IE unterstützt keine saubere rbga-Transparenz, die Child-Objekte ungestört ließe. Selbst die Verwendung von alpha-PNGs führt bis IE7 dazu, dass Formulare innerhalb des Nodes nicht mehr klickbar sind.
Einzige brauchbare Möglichkeit: ein entsprechendes Element im Hintergrund aufspannen und dieses halbtransparent machen. Hoffen wir, dass der IE9 diese Probleme bald alle behoben hat und die älteren Versionen komplett ablöst (oder bei XP und älter Firefox, Opera, Safari oder Chrome zum Einsatz kommen).
Gruß, LX
--
RFC 1925, Satz 2: Egal, wie fest man schiebt, ganz gleich, wie hoch die Priorität ist, man kann die Lichtgeschwindigkeit nicht erhöhen.-
Der IE unterstützt keine saubere rbga-Transparenz, die Child-Objekte ungestört ließe. Selbst die Verwendung von alpha-PNGs führt bis IE7 dazu, dass Formulare innerhalb des Nodes nicht mehr klickbar sind.
Einzige brauchbare Möglichkeit: ein entsprechendes Element im Hintergrund aufspannen und dieses halbtransparent machen. Hoffen wir, dass der IE9 diese Probleme bald alle behoben hat und die älteren Versionen komplett ablöst (oder bei XP und älter Firefox, Opera, Safari oder Chrome zum Einsatz kommen).
Gruß, LX
Sch...! verdammter IE. Wenns im IE9 behoben wird ist ja auch nicht wirklich damit geholfen, wenn man bedenkt, wie viele noch den 6er benutzen (bei uns noch immer 7-10%! der Besucher).
Nunja, trotzdem danke für die schnelle Antwort - erspart mir zumindest fruchtloses Herumexperimentieren.
Hab nun die ganze Fläche nun auf 80% Transparenz gestellt und auf Mouseover wird es 100%. Nicht perfekt aber vielleicht denkt ja wer, daß wäre von Anfang an Absicht gewesen und findet es cool. (was aber wieder nicht im 6er funktioniert aber wer den benutzt muss halt damit leben, daß einiges nicht so hübsch aussieht - so lange es halt zumindest funktioniert).
Nochmals Danke,
Marc
-
-
Hallo Marc,
hier mal eine ungetestete idee:
Positioniere ein Element über deinem Bild welches zwei positionierte Kindelemente hat, die quasi die gleichen Koordinaten haben, nur halt via z-index übereinander angeordnet sind. Das eine Kindelement ist der Hintergrund mit der Alphatransparenz, das andere enthält den Content.
Gruß
Ole--
Das Wort Vegetarier kommt aus dem Indianischen und bedeutet: Zu dumm zum Jagen.