nicht angemeldet
Transparenz
1 
Der Martin
0
0 
Gunnar Bittersmann
Transparenz
Hallo,
ich habe schon das Archiv durchsucht und auch ähnliche Beiträge gefunden, aber keine Antwort auf meine Frage. Vergebt mir, wenn ich was übersah.
Ich möchte über ein Hintergrundbild eine Textbox mit halb-transparentem Hintergrund legen. Die Schrift soll aber gut lesbar (also nicht transparent) sein.
Im IE klappt das, wie ich es mir vorstelle.
Beispielcode:
<body background="background.jpg">
<div align="right">
<table height="200" width="200" bgcolor="#FF0000" style="filter:alpha(opacity=50);">
<tr>
<td><span style="position: relative;"><b>Hello </b></td>
</tr>
</table>
</div>
</body>
Im Firefox ist aber die Schrift auch transparent und dadurch schlecht lesbar.
Beispielcode:
<body background="background.jpg">
<div align="right">
<table height="200" width="200" bgcolor="#FF0000" style="opacity:0.5;">
<tr>
<td><span style="position: relative;"><b>Hello </b></td>
</tr>
</table>
</div>
</body>
Wie bekomme ich die Schrift im Firefox lesbar auf halb-transparentem Hintergrund?
-
Hi,
Wie bekomme ich die Schrift im Firefox lesbar auf halb-transparentem Hintergrund?
indem du entweder ein Hintergrundbild mit Alphatransparenz verwendest, oder die Hintergrundfarbe in RGBA angibst. Jedenfalls nicht Halbtransparenz für das gesamte Element festlegen, sondern nur für dessen Hintergrund!
So long,
Martin--
Er: Mit wem warst du gestern abend aus?
Sie: Du bist mal wieder eifersüchtig wie immer!
Er: Wer ist Immer?
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Hi,
indem du entweder ein Hintergrundbild mit Alphatransparenz verwendest, oder die Hintergrundfarbe in RGBA angibst. Jedenfalls nicht Halbtransparenz für das gesamte Element festlegen, sondern nur für dessen Hintergrund!
So long,
Martindanke für die schnelle Antwort.
Mit rgba habe ich aber das umgekehrte Problem zu jetzt.
Bisher funktioniert es im IE - der unterstützt aber kein rgba( )Ist also die einzige Lösung ein graues Hintergrundbild (Kachel) mit Alphatransparenz - sehe ich das richtig?
Gibt es denn keine "coole" lösung, mit der alle Browser zufrieden sind?
udo
-
@@Udo:
nuqneH
Mit rgba habe ich aber das umgekehrte Problem zu jetzt.
Bisher funktioniert es im IE - der unterstützt aber kein rgba( )Ist also die einzige Lösung ein graues Hintergrundbild (Kachel) mit Alphatransparenz - sehe ich das richtig?
Nein. Nein.
Gibt es denn keine "coole" lösung, mit der alle Browser zufrieden sind?
Doch, es gibt eine.
Es wird beides notiert: Erst die altertümliche Angabe der Hintergrundfarbe, danach die RGBA-Angabe.
Bei Browsern, die RGBA verstehen, überschreibt die zweite Angabe die erste. Browser, die RGBA nicht verstehen, ignorieren die zweite Angabe.
Alte IEs (< 9) bekommen ihren Filter. Der muss im IE 9 wieder weggenommen werden, da der sowohl RGBA als auch Filter versteht und sonst beides anwendet. Das geht für einen per 'filter' gesetzten Filter nicht per '-ms-filter'. Es geht aber mit einem Selektor, den der IE erst ab Version 9 versteht, bspw. '
p:not(x) { filter: none }' (bezogen auf mein Beispiel).Unschön nur das für IE < 9 zusätzlich erforderliche positionierte Element.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
-
@@Udo:
nuqneH
Ich möchte über ein Hintergrundbild eine Textbox mit halb-transparentem Hintergrund legen. Die Schrift soll aber gut lesbar (also nicht transparent) sein.
Im IE klappt das, wie ich es mir vorstelle.
Hm, tatsächlich: Der IE vergisst, die Schrift bei positionierten(!) Nachfahren(!)-Elementen transparent zu rendern. Is it a feature or a bug?
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"/> <title>TEST</title> <style> [code lang=css]body { background: black; } p { background: white; color: white; filter: alpha(opacity=33); zoom: 1; } span { position: relative; }</style>
</head>
<body>
<p><span>Weißer Adler</span> auf weißem Grund</p>
</body>
</html>[/code]Zeigt "Weißer Adler" opak (deutlich sichtbar); "auf weißem Grund" ist genauso transparent wie der Hintergrund (also nicht sichtbar).
Der 7er braucht dazu allerdings hasLayout (bspw. per 'zoom: 1'). Einer Tabelle bedarf es dazu nicht.
Beispielcode:
<body background="background.jpg">
<div align="right">
<table height="200" width="200" bgcolor="#FF0000" style="filter:alpha(opacity=50);">
<tr>
<td><span style="position: relative;"><b>Hello </b></td>
</tr>
</table></div>
Ist übles Markup: ungerechtfertigtes „müffelndes“ 'table'-Element, missbilligte HTML-Attribute zur Darstellung, @style-Attribute.
Gib sämtliche Darstellung per CSS an, und zwar nicht inline, sondern im Stylesheet!
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Zeigt "Weißer Adler" opak (deutlich sichtbar); "auf weißem Grund" ist genauso transparent wie der Hintergrund (also nicht sichtbar).
das beantwortet jetzt nicht wirklich meine Frage ;-)
aber danke fürs Mitgefühl.udo
-