Halbtransparente Tabelle?

[JR]

Hi!

Ich habe für meine Homepage ein Hintergrundbild. Da es aber nicht das Hauptaugenmerk sein soll, will ich die darüberliegende Tabelle halbtransparent machen, also, dass der Hintergrund teilweise durchschimmert.
Sagt nicht, ich solle irgendwo im Archiv schauen, da habe ich schon nix gefunden.

Greetz, JR, und danke schonmal

PS: Benutze HTML für die Tabelle, hab noch kein Stylesheet, falls ich das brauche (ich weiß nicht, wie ich das mache)

[Christian Seiler]

Hallo JR,

Ich habe für meine Homepage ein Hintergrundbild. Da es aber nicht das Hauptaugenmerk sein soll, will ich die darüberliegende Tabelle halbtransparent machen, also, dass der Hintergrund teilweise durchschimmert.

Vergiss es. Theoretisch geht es mit halbtransparenten PNGs. Der Internet Explorer unterstützt das jedoch nicht so ohne weiteres. (alle anderen modernen Browser unterstützen halbtransparente PNGs)

Du könntest natürlich *zusätzlich* die Microsoft-Erweiterung zu CSS namens filter: alpha verwenden, allerdings wird da nicht nur der Hintergrund, sondern auch der Text halbtransparent.

Viele Grüße,
Christian

[Fabian Transchel]

Hi Christian,

Vergiss es.

Sehr konstruktiv heute ;-) (Rein pädagogisch ist es natürlich die richtige Antwort *fg*)

Theoretisch geht es mit halbtransparenten PNGs. Der Internet Explorer unterstützt das jedoch nicht so ohne weiteres. (alle anderen modernen Browser unterstützen halbtransparente PNGs)

Genau. Deshalb nimmt man ein halbtransparentes PNG in ein div, dazu den Text. Geht in Browsern != IE.
Für den IE nimmt man hier noch die Alpha-Angabe hinzu. Über eine Browserweiche wird der Text mit der Farbe "transparent" ausgestattet.

Deshalb macht man ein weiteres div, das nur im IE zu sehen ist (via Browserweiche (bspws. über expression()) und lässt da den Alpha-Filter auf 100, packt den gleichen Text rein, wie in das andere div und freut sich'n Keks.

Du könntest natürlich *zusätzlich* die Microsoft-Erweiterung zu CSS namens filter: alpha verwenden, allerdings wird da nicht nur der Hintergrund, sondern auch der Text halbtransparent.

Genau das wird mit dem oberen Workaround umschifft. Ist natürlich in Sachen Barrierefreiheit unschön, da der Text da zweimal steht. Man muss eben Präferenzen setzen...

Grüße aus Barsinghausen,
Fabian

[JR]

Genau. Deshalb nimmt man ein halbtransparentes PNG in ein div, dazu den Text. Geht in Browsern != IE.
Für den IE nimmt man hier noch die Alpha-Angabe hinzu. Über eine Browserweiche wird der Text mit der Farbe "transparent" ausgestattet.

Deshalb macht man ein weiteres div, das nur im IE zu sehen ist (via Browserweiche (bspws. über expression()) und lässt da den Alpha-Filter auf 100, packt den gleichen Text rein, wie in das andere div und freut sich'n Keks.

Kannst du mir ein Quellcodebesipiel geben? Ich bin nicht so genial...

[Ed X]

Hi Fabian;

Für den IE nimmt man hier noch die Alpha-Angabe hinzu. Über eine Browserweiche wird der Text mit der Farbe "transparent" ausgestattet.

Das kann alles auch nicht komplizierter sein als 2 divs per css absolute zu
positionieren, der obere enthält den inhalt und der untere den hintergrund. Per
Browserweiche bekommen die dann unterschiedliche css. Der eine bekommt seinen
IE-alpha filter und der andere moz-opacity:0.5; oder so war das und schicht im
Schacht. Opera schaut zwar in die röhre aber irgendwer macht das doch immer :-)

Grüße aus L.E.
bye eddie

[Fabian Transchel]

Hi Ed X,

Für den IE nimmt man hier noch die Alpha-Angabe hinzu. Über eine Browserweiche wird der Text mit der Farbe "transparent" ausgestattet.
Das kann alles auch nicht komplizierter sein als 2 divs per css absolute zu
positionieren, der obere enthält den inhalt und der untere den hintergrund. Per
Browserweiche bekommen die dann unterschiedliche css. Der eine bekommt seinen
IE-alpha filter und der andere moz-opacity:0.5; oder so war das und schicht im
Schacht. Opera schaut zwar in die röhre aber irgendwer macht das doch immer :-)

Und wie willst du das skalieren?

Grüße aus Barsinghausen,
Fabian

[Orlando]

Hi,

Opera schaut zwar in die röhre aber irgendwer macht das doch immer :-)

Das muss doch nicht sein, oder? Einen Browser auszuschließen, nur weil es anders etwas einfacher zu sein scheint, ist Blödsinn. Die Lösung für alle ist nämlich ganz und gar nicht komliziert, siehe auch URI ganz oben.

Grüße,
 Roland

[Der Profi]

Nimm als Hintergrundbild der Tabelle einfach ein 4x4 großes
Bild bei dem Diagonal 2 Pixel ausgefüllt sind und nicht
ausgefüllt sind
also so:

4x4.gif

X |
 X|

oder

X|
X |

Alles klar?(X sind schwarze Pixel)

[JR]

Alles klar?(X sind schwarze Pixel)

Hi...
Geht es auch mit weißen? Klar, oder?
Okay, thx