Tabellen-Hintergrund transparent - aber Inhalte nicht!

[MrBusty]

Hallo Foren-User!

Ich möchte den mehrere Tabellen transparent gestalten - aber alles was in der Tabelle ist soll ganz normal angezeigt werden.

Diese Frage wurde auch schon 2004 gefragt:
http://forum.de.selfhtml.org/archiv/2004/1/t68063/#m389962

• blieb aber ohne Ergebnis...

Aus designerischen Gründen ist die Transparenz für den Hintergrund sehr wünschenswert. Um die Inhalte aber trotzdem gleich gut lesen zu können, müssen diese 100% undurchsichtig sein! Auch aus Performance-Gründen sollten Inhalte wie Bilder stets vollkommen undurchsichtig sein!

Hier ist mein CSS-Code:

// dies funktioniert:
table {
    background-color: black;
    filter:           alpha(opacity=80);
    opacity:          0.8;
    -khtml-opacity:   0.8;
}
// die Tabelle (mit Inhalten) wird transparent dargestellt,
// funktioniert auch in vielen Browsern:
// IE 6, Firefox 2 & Opera 9 getestet nur beim Netscape 7.1 ging es nicht

// folgender Quellcode bringt allerdings nichts:
img {
    filter:         alpha(opacity=100);
    opacity:        1;
    -khtml-opacity: 1;
}
// Die Bilder sind trotzdem transparent!!! :(

Hat jemand einen Trick auf Lager, um dieses Problem zu lösen?

[D.R.]

Hallo,

Ich möchte den mehrere Tabellen transparent gestalten - aber alles was in der Tabelle ist soll ganz normal angezeigt werden.

Hat jemand einen Trick auf Lager, um dieses Problem zu lösen?

Verwende ein teiltransparentes PNG als Hintergrund für die Tabellen.

mfg. Daniel

[MrBusty]

Hallo Daniel,

Verwende ein teiltransparentes PNG als Hintergrund für die Tabellen.

das hilft mir leider nicht...
Ich möchte eine Wasserzeichen-Hintergrundbild (also ein Hintergrundbild, welches nicht mitscrollt und auch größer als die Tabelle ist) durch die Tabelle durchschimmern lassen - aber eben nicht durch den Tabelleninhalt (vor allem Bilder).

Aber trotzdem besten Dank fürs Antworten!

MfG, Peter

PS: ein leeres, transparentes Element mit der eigentlichen Tabelle deckungsgleich anzeigen geht leider auch nicht, da ich in diesem Fall leider nicht absolut positionieren kann....

[Maxx]

Hallo Busty,

Verwende ein teiltransparentes PNG als Hintergrund für die Tabellen.

das hilft mir leider nicht...

Doch, genau das ist das einzige was dir hilft.
Hier wird es detailiert beschrieben: Teiltransparenz

Grüße,

Jochen

[D.R.]

Hallo,

Verwende ein teiltransparentes PNG als Hintergrund für die Tabellen.

das hilft mir leider nicht...
Ich möchte eine Wasserzeichen-Hintergrundbild (also ein Hintergrundbild, welches nicht mitscrollt und auch größer als die Tabelle ist) durch die Tabelle durchschimmern lassen - aber eben nicht durch den Tabelleninhalt (vor allem Bilder).

Das fixierte Hindergrundbild ist also der Seitenhintergrund oder?

Wo ist da das Problem?
body {[Hintergrundbild]}
table {background:url(transpixel.png)}

Alternativ kannst du das halbtransp. Hintergrundbild auch den <td>s zuweisen.

PS: ein leeres, transparentes Element mit der eigentlichen Tabelle deckungsgleich anzeigen geht leider auch nicht, da ich in diesem Fall leider nicht absolut positionieren kann....

Was ist mit relativ absoluter Positionierung ;-)

mfg. Daniel

[MrBusty]

Wo ist da das Problem?
body {[Hintergrundbild]}
table {background:url(transpixel.png)}

Alles klar! Denkfehler!!!
Bin davon ausgegangen, dass dieses Transpixel-Bild das Hintergrund-Bild enthalten sollte... war natürlich großer Mist!

Das Transpixelbild braucht dann ja auch bloß 1px mal 1px groß sein... cool.
Genau dass was ich brauche!

Danke! :D

ciao, Peter

[wahsaga]

hi,

table {background:url(transpixel.png)}

Das Transpixelbild braucht dann ja auch bloß 1px mal 1px groß sein... cool.

Nee, uncool - mit dem Kacheln so winziger Bilder auf größere Flächen mutest du den Browsern extrem viel Rechenarbeit zu (insb. in älteren Opera-Versionen kritisch, wenn dann auch noch Alphatransparenz dazukommt).
Ein größeres Bild - sagen wir, 100*100px, ist da wesentlich "browserfreundlicher". Und wenn es eh nur eine Farbe/einen Transparenzwert enthält, fällt das von der Dateigröße her kaum ins Gewicht.

gruß,
wahsaga

[D.R.]

Hallo,

mit dem Kacheln so winziger Bilder auf größere Flächen mutest du den Browsern extrem viel Rechenarbeit zu

Hm, das ist mir eigentlich noch nicht wirklich aufgefallen…

insb. in älteren Opera-Versionen kritisch

Naja, die „älteren Opera-Versionen“ sollen von der CSS-Unterstützung her auch nicht gerade optimal sein.

Ein größeres Bild - sagen wir, 100*100px, ist da wesentlich "browserfreundlicher".

Obwohl der Browser ein größeres Bild verarbeiten muss?

mfg. Daniel

[wahsaga]

hi,

mit dem Kacheln so winziger Bilder auf größere Flächen mutest du den Browsern extrem viel Rechenarbeit zu

Hm, das ist mir eigentlich noch nicht wirklich aufgefallen…

Mir schon.

insb. in älteren Opera-Versionen kritisch

Naja, die „älteren Opera-Versionen“ sollen von der CSS-Unterstützung her auch nicht gerade optimal sein.

Na ja, ich rede nicht von 5 oder 6, sondern von 7 und durchaus auch noch 8 - von der CSS-Unterstützung her schon sehr gut, Alphatransparenz in Bildern von der Performance her aber noch schwierig.

Ein größeres Bild - sagen wir, 100*100px, ist da wesentlich "browserfreundlicher".

Obwohl der Browser ein größeres Bild verarbeiten muss?

Ich gebe dir einmal eine Bodenfliese von 40cm², und einmal ein Mosaiksteinchen von 2,5cm² - von beiden stellst du jetzt bitte so viele Klone wie nötig her, und legst jeweils die Fussböden zweier gleichgroßer Räume damit aus. Sag Bescheid, wie lange du für die jeweilige Aufgabe gebraucht hast ...

gruß,
wahsaga

[D.R.]

Hallo,

Ich gebe dir einmal eine Bodenfliese von 40cm², und einmal ein Mosaiksteinchen von 2,5cm² - von beiden stellst du jetzt bitte so viele Klone wie nötig her, und legst jeweils die Fussböden zweier gleichgroßer Räume damit aus. Sag Bescheid, wie lange du für die jeweilige Aufgabe gebraucht hast ...

Ich bin mir nicht sicher, ob man das so direkt vergleichen kann, denn der Browser setzt die Bildchen ja nicht auf eine fest vorgegebene Fläche.
Sonst würden bei einer Vergrößerung des Fensters ja bildlose Flächen entstehen oder?

mfg. Daniel

[wahsaga]

hi,

Ich gebe dir einmal eine Bodenfliese von 40cm², und einmal ein Mosaiksteinchen von 2,5cm² - von beiden stellst du jetzt bitte so viele Klone wie nötig her, und legst jeweils die Fussböden zweier gleichgroßer Räume damit aus. Sag Bescheid, wie lange du für die jeweilige Aufgabe gebraucht hast ...

Ich bin mir nicht sicher, ob man das so direkt vergleichen kann, denn der Browser setzt die Bildchen ja nicht auf eine fest vorgegebene Fläche.

Wenn die Fläche Größe X hat, dann muss er das Bild so oft neben- und übereinanderlegen, bis es diese Fläche komplett ausfüllt.
Und das erfordert bei einem klitzekleinen Bild mehr Neben- und Übereinanderlegen, als bei einem größeren.
Ob X dabei fix ist, spielt m.E. keine Rolle.

Sonst würden bei einer Vergrößerung des Fensters ja bildlose Flächen entstehen oder?

Wenn du die Fenstergröße veränderst, rendert ein Browser doch sowieso neu.

gruß,
wahsaga

[D.R.]

Hallo,

Sonst würden bei einer Vergrößerung des Fensters ja bildlose Flächen entstehen oder?

Wenn du die Fenstergröße veränderst, rendert ein Browser doch sowieso neu.

Hm, ich dachte das gilt nur für Netscape <= 4. Neue Browser passen die Darstellung doch sofort an…

mfg. Daniel

[wahsaga]

hi,

Wenn du die Fenstergröße veränderst, rendert ein Browser doch sowieso neu.

Hm, ich dachte das gilt nur für Netscape <= 4. Neue Browser passen die Darstellung doch sofort an…

Ja - sag ich doch.
Oder was vermutest du, was ich mit neu rendern meinte?

gruß,
wahsaga

[D.R.]

Hallo,

Wenn du die Fenstergröße veränderst, rendert ein Browser doch sowieso neu.

Hm, ich dachte das gilt nur für Netscape <= 4. Neue Browser passen die Darstellung doch sofort an…

Ja - sag ich doch.
Oder was vermutest du, was ich mit neu rendern meinte?

Das da so ein Ladebalken kommt und die Neuberechnung ca. 1 Sekunde dauert.
Oder sind neue Browser da einfach nur schneller?

mfg. Daniel