✔ Wie kann ich ein transparentes GIF für HTML erstellen?

[Rathje]

Hallo,
ich möchte gern ein transparentes, weißes .gif erstellen. In HTML habe ich ein Hintergrundbild, über das ich eine Tabelle legen will. Um die schwarze Schrift in der Tabelle vor dem zeimlich dunklen Hintergrundbild besser lesen zu können, möchte ich das weiße, transparente GIF, als Hintergrund für die Tabelle benutzen. Transparent soll das GIF sein, weil ich immer noch das Hintergrundbild sehen will, nur eben an der Stelle wo die Tabelle ist, etwas heller.
Wenn ich den Diffusions-, Störungs- oder Muster-Transparenz-Dither nehme, klapt es zwar, aber die Schrift über den Transparenten Hintergrund ist dann leider nicht mehr leserlich, sie zeigt die gleichen Muster wie der transparente Hintergrund.
Vieleicht ist das auch eine HTML / CSS-Stile Problem.
Über Lösungsvorschläge bin ich sehr Dankbar.
Grüße
Thomas

 

[ShadowMan]

Hi du!

Ich glaube dir ist nicht ganz klar was ein gif überhaupt "kann". Gifs kennen nur: transparent / nicht transparent. Und das ohne Abstufungen.
Anders dagegen verhält sich das PNG-Format. Dieses weist jedem Pixel einen bestimmten Prozentsatz an Transparenz zu.
PNGs sind aber nicht wirklich kompatibel zum IE.

Mein Tipp also:
Dein Bild slicen und dann die Stellen wo es heller sein soll auch heller machen und diese dann getrennt in die Tabelle legen oder das Bild direkt in der Mitte z.B. Heller machen, eine klare Kontur drum und dann genau dahin deine Tabelle.

Gruß,
Manuel ;-]

 

[Rathje]

Hallo Manuel,
erst mal vielen Dank für deine Hilfe.
Dein Lösungsvorschlag mit den Slices ist zwar mögich aber sehr umständlich. Ich habe ein Hintergrundbild (Body) , und viele unterschiedlich große Tabellen, auch auf verschiedenen Seiten, zusätzlich kann sich die Tabellengröße und Lage schnell mal ändern. Dann muß ich jedes mal wieder einen passenden Slice erstellen, damit der helle Hintergrund der Tabelle deckungsgleich mit dem Body-Hintergrund-Bild ist.

Den Hinweis GIF kann nur transparent oder nicht transparent sein, habe ich verstanden.
Wenn ich im "PhotoShop"/"Speichern fürs WEB" Transparenz und einen der Transparent-Dither wähle, wird mir dann ein GIF erstellt, dass in bestimmten Abständen, je nach Muster ein Pixel (z.B Weiß) und die zwischenräume Transparent, darstellt?

Wenn ja, dann ist mein Problem wohl eher eine HTML Sache, wie die unterschielichen "Ebenen" übereinanderliegen ( Hintergrudbild [Body], "transparentes Muster" Hintergrundbild [Tabelle] und schwarze Schrift.) im Browser Dargestellt werden?

Gruß
Thomas

 

[ShadowMan]

Hi Thomas!

Ich glaube nicht das der Dither dein Problem lösen wird da es ja am Format liegt und gif nun mal so komprimiert wird das es nur tr. oder ni.tr. speichert.
Ich verstehe das deine Tabellen immer unterschiedlich groß sind und würde daher auch auf Slices verzichten?
Aber wieso sagst du der Tabelle dann nicht insgesamt wie groß sie sein soll und machst dann auch genau diesen Bereich des Hintergrundbildes heller?
Klar, damit wäre noch nicht das Problem gelöst das sie immer unterschiedlich groß ist, aber immerhin ersparst du dir die Arbeit des Slicens.

2 Alternativen:

- du machst das ganze Bild einfach heller
- du machst die Schrift vor dem dunklen Hintergrund einfach weiß/heller

Gruß,
Manuel ;-]

 

[Rathje]

Hallo Manuel,
ich habe jetzt zwar keine Lösung für mein Problem , aber ich weiß wenigsten, dass ich nicht so weiter komme wie ich wollte.
Danke
Thomas

 

[Tobias Menzel]

Hi,

Du könntest natürlich versuchen, ein 2x2 -Pixel-GIF (mit 2 weißen und 2 transparenten) zu verwenden, das Du als Hintergrund einer Ebene definierst. Damit erhälst Du zwar keine gleichmäßige Aufhellung, aber je nach Art des Hintergrundes (und der Schrift im Vordergrund) kann eine derartige Rasterung verwendbar sein.

Gruß
.