nicht angemeldet
opacity vererbung in Webkit
Hallo,
Ich versuche in Webkit (die Safariengine), mit Hilfe von opacity etwas ausblenden, und dahinter dann ein sichtbares Zeichen einzufügen. Ich habe zwei Sachen probiert, die aber leider nicht geklappt haben:
.duplicateNick { opacity: 0; }
.duplicateNick:after { content: "»"; opacity: 0.5; }
.duplicateNick { opacity: 0; }
.duplicateNick::after { content: "»"; opacity: 0.5; }
Das Zeichen » wird leider trotzdem durchsichtig angezeigt. Wenn ich das mit color mache:
.duplicateNick { color: white; }
.duplicateNick:after { content: "»"; color: black; }
dann funktioniert es wie erwartet, der Text wird ausgeblendet, das Zeichen » wird schwarz angezeigt. Doch leider hat der Text unterschiedliche Farben und das Zeichen soll genau in der Farbe erscheinen wie der Text nur mit 50% durchsichtigkeit.
Hat jemand irgendwie eine Idee wie man das hinbekommt?
Grüße
Jeena Paradies
-
Hallo,
Das Zeichen » wird leider trotzdem durchsichtig angezeigt. Wenn ich das mit color mache:
.duplicateNick { color: white; }
.duplicateNick:after { content: "»"; color: black; }
> > dann funktioniert es wie erwartet, der Text wird ausgeblendet, das Zeichen » wird schwarz angezeigt. Doch leider hat der Text unterschiedliche Farben und das Zeichen soll genau in der Farbe erscheinen wie der Text nur mit 50% durchsichtigkeit. Das ist leider das Problem, bei der Verwendung von opacity. Die Eigenschaften Vererben sich. Da ein before-/after- Pseudoelement innerhalb des umschließenden Elements liegt, hast du das Problem in diesem Fall leider auch. D.h. Wenn du einem Element einen opacity-Wert von 0.5 gibst, werden alle darin enthaltenen Kindelemente ebenfalls mit 0.5-facher Transparenz dargestellt. Wenn du denen jetzt opacity:1 zuweist passiert gar nichts. Verwendest du aber wieder opacity:0.5, werden sie nur noch mit 25%-iger Transparent dargestellt. Leider kannst du dagegen nicht wirklich etwas machen, außer dich beim W3C zu beschweren ;-) [1] Du könntest die Elemente zu höchstens ineinander verschachteln und einem tiefer-gelegenen Element das opacity verpassen. Du kannst dir das Verhalten ja mal auf [meiner Beispielseite](http://danielrichter.da.funpic.de/test/opacity.xhtml) anschauen (Achtung: im Opera 9 gibt's evtl Performance-Probleme [der Bug wurde schon gemeldet]). Dort hat jedes div den gleichen opacity-Wert. Trotzdem werden die div's immer transparenter… [1] Obwohl der filter-alpha des IE genauso arbeitet… mfg. Daniel -- [Experten raten von der Verwendung des Internet Explorers ab!](http://web.oesterchat.com/internet-explorer/) [Mein SELF-stylesheet](http://danielrichter.da.funpic.de/SELFForumsCSS.html) | [Darum Firefox!](http://www.firefox-love.de/) [Selfcode](http://forum.de.selfhtml.org/cgi-bin/selfcode.pl): [ie:{ fl:| br:> va:| ls:# fo:| rl:( n4:# ss:{ de:> js:| ch:? mo:) zu:}](http://www.peter.in-berlin.de/projekte/selfcode/?code=ie%3A%7B+fl%3A%7C+br%3A%3E+va%3A%7C+ls%3A%23+fo%3A%7C+rl%3A%28+n4%3A%23+ss%3A%7B+de%3A%3E+js%3A%7C+ch%3A%3F+mo%3A%29+zu%3A%7D)-
Hi,
Leider kannst du dagegen nicht wirklich etwas machen, außer dich beim W3C zu beschweren ;-) [1]
[1] Obwohl der filter-alpha des IE genauso arbeitet…IIRC arbeitet der alpha-filter hier anders - nämlich ohne Vererbung.
Du könntest die Elemente zu höchstens ineinander verschachteln und einem tiefer-gelegenen Element das opacity verpassen.
Und es ggf. mit z-index nach oben holen.
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
-
-
