nicht angemeldet
Transparenz (glaub neu... :) )
Hallo,
zunächst muß in anmerken, daß ich die alten Forenbeiträge usw gelesen habe, mein Problem aber nirgendwo so richtig angesprochen wird. Denn ich benutze keine pngs.
Es geht um Transparenz beim IE. Ich habe eine Tabelle und eine Tabellenzelle besitzt ein Hintergrundbild (jpg). Gleichzeitig ist in dieser Tabellenzelle ein div (Hintergrundfarbe weiß) mit Text. Beim Firefox und Safari funktionierts super, nur der IE mit seinem alpha-Filter spackt rum. Ich will, daß der weiße Hintergrund des divs transparent wird und man ergo das Hintergrundbild der Tabellenzelle sieht. Das funktioniert aber nicht. Nur die Schriftfarbe verblaßt, je nach Einstellung des Filters. Aber die Hintergrundfarbe bleibt weiß.
Hat einer von Euch eine Ahnung?
Danke!
Grüße, Klaus
-
Beim Firefox und Safari funktionierts super, nur der IE mit seinem alpha-Filter spackt rum.
Hat einer von Euch eine Ahnung?opacity: .50; filter:Alpha(opacity=50);damit "verblasst" in jedem fall auch der text
-
Beim Firefox und Safari funktionierts super, nur der IE mit seinem alpha-Filter spackt rum.
Hat einer von Euch eine Ahnung?opacity: .50;
filter:Alpha(opacity=50);> > damit "verblasst" in jedem fall auch der text Genau das funktioniert ja leider nicht. Ich weiß nicht warum. Es ist der simple Aufbau, den ich gerade beschrieben habe. Keine verschachtelten divs o.ä. Die Schrift verblaßt, die Hintergrundfarbe bleibt weiß. Und ich verstehe nicht, warum.-
Genau das funktioniert ja leider nicht. Ich weiß nicht warum. Es ist der simple Aufbau, den ich gerade beschrieben habe. Keine verschachtelten divs o.ä. Die Schrift verblaßt, die Hintergrundfarbe bleibt weiß. Und ich verstehe nicht, warum.
In welchem IE tritt das Problem denn auf?
Am besten postest du mal deinen Quellcode. Für mich klingt das, als wäre da einfach irgendwo ein Tippfehler oder so drin.-
Erstmal herzlichen Dank für die schnelle Hilfe! Mein Code ist der folgende:
<html> <head> <style type="text/css"> body { margin: 0; padding: 0; background-color: #ffffff; color: #ff0000; font-family: Verdana,Helvetica,Arial; font-size: 21; } div#wrapper { border: 1px solid #333333; padding: 20px; background: #ffffff; margin-top: 125px; filter: alpha(opacity=70); opacity: 0.7; -moz-opacity: 0.7; } div#linkeSpalte { float: left; width: 200px; height: 337px; vertical-align: top; } div#mittlereSpalte { margin-left: 280px; width: 200px; height: 337px; vertical-align: top; } div#rechteSpalte { float: right; width: 200px; height: 337px; vertical-align: top; } </style> </head> <body background="./bg1.jpg" style="background-repeat:repeat-x;" > <table style="padding:0px; margin:0px; width:100%; height:600px; border:1px; border-collapse:collapse;"> <tr> <td style="width:200px;"></td> <td background="./bg2.jpg" style="width:800px; text-align:left; vertical-align:top;"> <div id="wrapper"> <div id="linkeSpalte"> Wir machen durch bis morgen früh </div> <div id="rechteSpalte"> und singen </div> <div id="mittlereSpalte"> Bummsfallera </div> </div> </td> <td></td> </tr> </table> </body> </html>
-
-
Genau das funktioniert ja leider nicht. Ich weiß nicht warum.
Ohne Code wissen wirs auch nicht.
--
LG,
Snafu
-
-
-
Hi,
ich hab das mal schnell getestet. Im IE 7 funktioniert das mit filter:alpha(opacity=50); wunderbar. (Und laut NetRenderer auch in den Versionen 8 beta und 6, in 5.5 allerdings scheinbar nicht.)
Was du meines Wissens nicht verhindern kannst, ist dass die Schrift auch an Deckkraft verliert. Offenbar wird die Transparenz unvermeidlich an alle Kindelemente weitervererbt.
Gruß, Apropos
-
Offenbar wird die Transparenz unvermeidlich an alle Kindelemente weitervererbt.
das soll auch so sein - wenn man einen halbtransparenten hintergrund haben möchte, sollte man einn halbtransparenten hintergrund verwenden und nicht eine eigenschaft, die das element transparent macht
alphatransparenz (zb bei pngs) versteht der ie6 allerdings nicht nativ - zumindest nicht so gewünscht
-
-
Hat denn wirklich keiner eine Ahnung?? Ich checks hier einfach echt grad nicht...
<html> <head> <style type="text/css"> body { margin: 0; padding: 0; background-color: #ffffff; color: #ff0000; font-family: Verdana,Helvetica,Arial; font-size: 21; } div#wrapper { border: 1px solid #333333; padding: 20px; background: #ffffff; margin-top: 125px; filter: alpha(opacity=70); opacity: 0.7; -moz-opacity: 0.7; } div#linkeSpalte { float: left; width: 200px; height: 337px; vertical-align: top; } div#mittlereSpalte { margin-left: 280px; width: 200px; height: 337px; vertical-align: top; } div#rechteSpalte { float: right; width: 200px; height: 337px; vertical-align: top; } </style> </head> <body background="./bg1.jpg" style="background-repeat:repeat-x;" > <table style="padding:0px; margin:0px; width:100%; height:600px; border:1px; border-collapse:collapse;"> <tr> <td style="width:200px;"></td> <td background="./bg2.jpg" style="width:800px; text-align:left; vertical-align:top;"> <div id="wrapper"> <div id="linkeSpalte"> Wir machen durch bis morgen früh </div> <div id="rechteSpalte"> und singen </div> <div id="mittlereSpalte"> Bummsfallera </div> </div> </td> <td></td> </tr> </table> </body> </html>-
Der IE7 braucht eine relative / absolute Breitenangabe für das Element wo der Filter angewendet werden soll damit der Filter funktionniert.
Also entweder die Breite ausrechnen und nicht vergessen Padding zu berücksichtigen oder einfachwidth:100%;und den enthaltenen Elementen einen margin geben.--
LG,
Snafu-
Ergänzung: Warum hast du eine Tabelle wenn dus dann sowieso mit DIVs machst?
Lass doch die Tabelle weg und mach halt wenns notwendig is noch ein zusätzliches DIV.--
LG,
Snafu
-
-