Opacity : Nur den Hintergrund transparent machen

neop13 · 24.11.2013

Hallo
ich arbeite mit NVU bzw. Dreamweaver, aber im Grunde ist es egal welches Programm.

ich möchte einen Tabelleninhalt mit einem transparenten Hintergrund versehen, aber leider macht er mir auch immer den Text und alles weitere transparent.
wie kann ich das machen
Habe die Transparenz mit :
<td style="background-image: url(background.png); opacity: 0.5;">

erstellt

Danke

cebito · 24.11.2013

AW: Opacity : Nur den Hintergrund transparent machen

Wenn du ein Image benutzt, dann mach dieses entsprechend transparent. Opacity gilt immer für das ganze Element und alle seine Kinder. Wenn der Hintergrund nur eine halbtransparente Farbe ist, kannst du diese auch per CSS bestimmen:

Code:

background:rgba(255,255,255,0.5);

würde einen 50% transparenten weißen Hintergrund ergeben.

neop13 · 25.11.2013

AW: Opacity : Nur den Hintergrund transparent machen

Hi
also ich bekomme es nicht hin. Als Hintergrund macht er es mit auf die ganze Seite. Ich will esaber nur im Hintergrund der Zelle Haben. Aber nicht das alle innenliegenden Zellen auch Transparent sind, und erst recht nicht der text.
Das Muss Dreamweaver doch auch so hinbekommen oder nicht?
danke

Zu Info:
es ist ein kleines Bild, was ich als repeat haben will um die ganze Zlle zu füllen.

Myhar · 26.11.2013

AW: Opacity : Nur den Hintergrund transparent machen

Ich hoffe, du nimmst keine Tabellen als Layoutmittel? So arg verschachtelte Tabellen sind doch eigentlich unnötig.
Kannst du mal einen Ausschnitt deines Codes posten? Ohne den kann man nämlich nur so allgemeine Lösungsvorschläge wie den von cebito posten. Er hat dir die Antwort ja schon gegeben.
Möchtest du spezifisch für dein Projekt haben, dann und auch, was du schon versucht hast, um dein Problem zu lösen.

afr0kalypse · 26.11.2013

AW: Opacity : Nur den Hintergrund transparent machen

http://jsfiddle.net/GsbLL/1/

Hintergrund der Seite rot, Hintergrund der Tabellenzelle 50% schwarz. Geht beim IE erst ab Version 9

neop13 · 26.11.2013

AW: Opacity : Nur den Hintergrund transparent machen

Hallo
Es ist z.B. wie hier bei machHTML. Die haben 10101010101 im Hintergrund.
aber wo kommt das her. und genau so möchte ich ein Bild im Hintergrund



<table style="width:100%;background-color:#FFFFFF;"><tr><td style="text-align:center;"><span style="text-align:center;position:absolute;top:0px;left:-2000px;z-index:-99;color:#EFEFEF;">machhtml</span><table style="border:1px solid #EFEFEF;width:90%;position:relative;margin-top:2px;margin-bottom:2px;margin-left:auto;margin-right:auto;"><tr><td><table border="0" style="width:100%;height:131px;border-collapse:collapse;"><tr><td style="width:550px;height:131px;background-image:url('http://www.machthtml.de/deko/d-computer/d-computer01-lo.jpg');background-repeat:no-repeat;background-position:top right;margin:0px;padding:0px;"><div style="width:550px;height:131px;text-align:right;position:relative;"><a href="http://members.ebay.de/ws/eBayISAPI.dll?ViewUserPage&userid=machhtml" target="_blank" title="Auktionsvorlagen kostenlos" style="width:80px;height:14px;position:absolute;top:10px;right:90px;text-decoration:none;"> </a></div></td><td style="height:131px;background-image:url('http://www.machthtml.de/deko/d-computer/d-computer01-o.jpg');background-repeat:repeat-x;background-position:top left;"><br></td></tr></table><div style="background-image:url('http://www.machthtml.de/deko/d-computer/d-computer01-bg.jpg');background-repeat:repeat;background-position:top left;margin:0px;padding:0px;"><div style="background-image:url('http://www.machthtml.de/deko/d-computer/d-computer01-u.jpg');background-repeat:repeat-x;background-position:bottom left;margin:0px;padding:0px;"><div style="padding-bottom:40px;text-align:center;"><table id="mhv" border="0" style="margin:0px;width:100%;margin-left:auto;margin-right:auto;text-align:center;background-color:transparent;"><tr><td style="padding:15px;padding-top:10px;"><div id="mhrdiv0" class="mhrdiv" style="padding:0px;margin:0px;"><table id="mhr" style="background-color:transparent;width:auto;margin-left:auto;margin-right:auto;margin-top:10px;"><tr><td style="height:auto;vertical-align:top;padding:0px;"><table style="border-collapse:collapse;padding:0px;"><tr style=""><td style="vertical-align:top;padding:0px;"><p style="padding:2px;width:auto;font-family:Verdana;font-size:12pt;font-weight:normal;font-style:normal;color:#000000;background-color:transparent;margin-left:auto;margin-right:auto;margin-top:0px;margin-bottom:0px;text-align:center;">test 1</p></td></tr></table></td> <td style="height:auto;vertical-align:top;padding:0px;"><table style="border-collapse:collapse;padding:0px;"><tr style=""><td style="vertical-align:top;padding:0px;">
<table border="0" style="padding:2px;padding-top:0px;padding-bottom:0px;width:300px;font-family:Verdana;font-size:12pt;line-height:14pt;color:#000000;background-color:transparent;text-align:left;margin-left:auto;margin-right:auto;margin-top:0px;margin-bottom:0px;">
<tr><td style="width:23px;padding-right:2px;vertical-align:top;text-align:right;"><ul style="width:25px;list-style-position:inside;margin:0px;padding:0px;list-style-type:disc;"><li style="margin:0px;padding:0px;"> </li></ul></td><td style="text-align:left;vertical-align:top;font-weight:normal;font-style:normal;">Text für einen Listenpunkt</td></tr>
<tr><td style="width:23px;padding-right:2px;vertical-align:top;text-align:right;"><ul style="width:25px;list-style-position:inside;margin:0px;padding:0px;list-style-type:disc;"><li style="margin:0px;padding:0px;"> </li></ul></td><td style="text-align:left;vertical-align:top;font-weight:normal;font-style:normal;">Text für einen Listenpunkt</td></tr>
<tr><td style="width:23px;padding-right:2px;vertical-align:top;text-align:right;"><ul style="width:25px;list-style-position:inside;margin:0px;padding:0px;list-style-type:disc;"><li style="margin:0px;padding:0px;"> </li></ul></td><td style="text-align:left;vertical-align:top;font-weight:normal;font-style:normal;">Text für einen Listenpunkt</td></tr>
<tr><td style="width:23px;padding-right:2px;vertical-align:top;text-align:right;"><ul style="width:25px;list-style-position:inside;margin:0px;padding:0px;list-style-type:disc;"><li style="margin:0px;padding:0px;"> </li></ul></td><td style="text-align:left;vertical-align:top;font-weight:normal;font-style:normal;">Text für einen Listenpunkt</td></tr>
<tr><td style="width:23px;padding-right:2px;vertical-align:top;text-align:right;"><ul style="width:25px;list-style-position:inside;margin:0px;padding:0px;list-style-type:disc;"><li style="margin:0px;padding:0px;"> </li></ul></td><td style="text-align:left;vertical-align:top;font-weight:normal;font-style:normal;">Text für einen Listenpunkt</td></tr></table></td></tr><tr style=""><td style="vertical-align:top;padding:0px;"><p style="padding:2px;width:auto;font-family:Verdana;font-size:12pt;font-weight:normal;font-style:normal;color:#000000;background-color:transparent;margin-left:auto;margin-right:auto;margin-top:0px;margin-bottom:0px;text-align:center;"></p></td></tr></table></td></tr></table></div></td></tr></table></div></div></div></td></tr></table></td></tr></table>

Myhar · 27.11.2013

AW: Opacity : Nur den Hintergrund transparent machen

So ein unformatierter Code-Salat und das nicht einmal in [ CODE ] Tags. Das solltest du schleunigst anpassen. Auch hast du nicht spezifiert, wo du deine Transparenz haben willst. Also gehe ich einmal davon aus, dass du für die gesamte Tabelle einen transparenten Hintergrund haben willst? Oder doch nur für eine Tabellenzeile?
Das 10101010 ist ein Hintergrundbild, genauer gesagt dieses hier. Das wird einfach als background-image definiert. Das hat aber keinerlei Transparenz. Wenn du so ein Bild haben möchtest, dann erstelle ein Bild und definiere es als Hintergrundbild. Möchtest du eine transparente Hintergrundfarbe haben, dann verwende die Lösung von cebito (oder die von afrokalypse, das ist im Prinzip das Selbe)

lukasmerz · 29.11.2013

AW: Opacity : Nur den Hintergrund transparent machen

Schau mal hier vorbei

HosonoDesign · 04.11.2014

Hier kannst du es mal gucken.
Du brauchst kein Opacity zeugst

cebito · 04.11.2014

HosonoDesign schrieb:
Hier kannst du es mal gucken.
Du brauchst kein Opacity zeugst

Im Grunde, was mein Beitrag von vor einem Jahr schon aussagt. Aber du hast einen kleinen Fehler drin, die Werte für RGB-Farben umfassen 0 (nicht vorhanden) bis 255 (voll vorhanden) = 256 Farbwerte. 0 - 256 ist falsch, weil das ein Spectrum von 257 Farbwerten darstellen würde

HosonoDesign · 05.11.2014

cebito schrieb:
Im Grunde, was mein Beitrag von vor einem Jahr schon aussagt. Aber du hast einen kleinen Fehler drin, die Werte für RGB-Farben umfassen 0 (nicht vorhanden) bis 255 (voll vorhanden) = 256 Farbwerte. 0 - 256 ist falsch, weil das ein Spectrum von 257 Farbwerten darstellen würde

Achso ok danke

Ich habe die Webseite aufgestellt um mich mit dem Thema näher zu befassen.

cebito · 05.11.2014

HosonoDesign schrieb:
Ich habe die Webseite aufgestellt um mich mit dem Thema näher zu befassen.

Sehr gut, Spaß am Lernen gehört dazu