Transparenz in fast einer ganzen Zelle

[Latze Bierknecht]

Salve,
ich habe auf meiner Seite eine große Tabelle (zwecks Strukturierung), unterlegt mit einem Hintergrundbild. In einer Zelle der Tabelle verblaßt das Hintergrundbild, damit man die schwarze Schrift mit dem Seiteninhalt besser erkennen kann, scharfe Konturen des Bildes sind aber noch schwach sichtbar. Dies erreiche ich durch eine Angabe style="filter:Alpha(opacity=80)" im <td>-Tag.
So weit, so gut.
Auf der rechten Seite der Zelle befindet sich ein Foto. Dieses ist leider auch transparent. Die Konturen des Hintergrundes schimmern durch. Ich möchte das Foto aber untransparent mit satten Farben darstellen. Wie geht das?

Für das Foto eine eigene Filter-Anweisung zu schreiben, bringt nichts. Diese ersetzt nicht die obige Anweisung, vielmehr setzt sie sich noch darauf, und das Foto wird blasser.
Bei Text kann ich den Hintergrund übertünchen durch eine Angabe background-color:white, aber bei einem Foto geht das nicht.
Jede Hilfe ist willkommen.

PS: Daß mit meinem Filter nicht alle Browser klarkommen, ist mir bekannt.

[Powl]

Hallo,

vielleicht findest Du in diesem Artikel einen Hinweis, der Dich weiterbringt.

netten Tag
^da Powl

[Latze Bierknecht]

Moin,

diesen Artikel hatte ich schon gefunden, mir den opacity-Teil rausgepickt, weil der funktioniert, und den Rest Rest sein lassen.

Natürlich könnte ich mein Hintergrundbild genau so darstellen, daß es da, wo das Foto hinkommt, weiß ist, damit dieser Durchschimmereffekt nicht auftritt (wie die Katze von Harald Lesch, die glücklicherweise da, wo die Augen sind, Löcher im Fell hat). Allerdings wäre dieses Konzept auf etwa 60 Seiten durchzuziehen, teilweise mehrfach pro Seite. Wenn ein Browser nicht mitspielt, oder wenn jemand die Fenstergröße verändert, wird das ganze aber unschön.

Der im Artikel mit dem Konjunktiv erwähnte Königsweg wäre auch denkbar. Daß statt des durchschimmernden Hintergrundbildes ein weißer Hintergrund zu sehen wäre, wäre zwar nicht die Wunschlösung aber immer noch ein akzeptabler Kompromiß.

Nichts desto trotz ginge auch das etwas an meinem Problem vorbei. Denn im Prinzip wäre es ganz einfach zu lösen, wenn man in css eine Angabe machen könnte: Gilt für das ganze <td>, aber nicht in <img>.
Geht sowas?

[Cybaer]

Hi,

Geht sowas?

Nein.

Aber Du kannst ja in die TD 2 Elemente packen: IMG und z.B. ein (teiltransparentes) DIV. Dann mit position absolut positionieren und mit z-index hintereinanderlegen.

Gruß, Cybaer

[Latze Bierknecht]

Geht sowas?

Nein.

Schade

Aber Du kannst ja in die TD 2 Elemente packen: IMG und z.B. ein (teiltransparentes) DIV. Dann mit position absolut positionieren und mit z-index hintereinanderlegen.

Verzeih meine Unwissenheit. Ich beschäftige mich erst seit 2 Wochen mit HTML. Deshalb weiß ich nicht auf Anhieb, was du mir mit deinen Zeilen sagen willst.
Du möchtest mir vorschlagen, in die Zelle sowohl mein Hintergrundbild als auch ein teiltransparentes div zu legen. Nun, das Hintergrundbild geht in den Zellen drüber und drunter unverblaßt weiter, ist somit Hintergrund nicht nur der Zelle, sondern der ganzen Tabelle. Oder meinst du nicht das Hintergrundbild sondern das Foto?
Dann soll ich wohl die beiden Elemente absolut positionieren. Hm, dazu müßte ich wissen, wo meine Zelle anfängt.
Der z-Index indes ist mir völlig unbekannt.
Was ich glaube durchzuverstehen, ist der Weg einer pixelgenauen Zusammensetzung der ganzen Seite.

Entschuldige, aber ich bitte um weitere Informationen.

[Latze Bierknecht]

Eine Suche nach dem z-Index war erstaunlich schnell von Erfolg gekrönt. An sich sind diese Layers eine gute Idee, aber die meisten Browser verstehen sie nicht. Deshalb kommen sie als Lösung eher nicht in Betracht.
Gibt es noch andere Ideen?

[Cybaer]

Hi,

Eine Suche nach dem z-Index war erstaunlich schnell von Erfolg gekrönt.

Sollte man bei SELFHTML von ausgehen. ;-)

An sich sind diese Layers eine gute Idee, aber die meisten Browser verstehen sie nicht. Deshalb kommen sie als Lösung eher nicht in Betracht.

Dann hast Du falsch geschaut. Nutze die Quickbar, Luke. ;)

z-index unterstützen IIRC *alle* Browser, die CSS unterstützen - ganz bestimmt aber alle die Transparenz beherrschen ;->.

Und absolute Positionierung hat auch *nichts* mit "pixelgenauen Zusammensetzung" zu tun! Sie bezieht sich aufs Elternelement (hier also TD)

Beispiel:

<td>
 <img style="position:absolute; left:auto; top:auto; z-index:-1" src="example.gif" alt="">
 Blablabla<br>
</td>

Gibt es noch andere Ideen?

Nein - ist auch nicht notwendig. ;-)

Gruß, Cybaer

[wahsaga]

hi,

Und absolute Positionierung hat auch *nichts* mit "pixelgenauen Zusammensetzung" zu tun! Sie bezieht sich aufs Elternelement (hier also TD)

Nein, das ist nicht korrekt.
Absolute Positionierung orientiert sich am nächsthöheren Vorfahrenelement, dessen Positionierung vom Default static abweicht, und bei Fehlen eines solchen am Viewport.

Beispiel:

<td>
<img style="position:absolute; left:auto; top:auto; z-index:-1" src="example.gif" alt="">
Blablabla<br>
</td>

Den Defaultwert static durch relative zu überschreiben, bietet sich in solchen Fällen meist an - allerdings sind die Auswirkungen von position:relative für Tabellenelemente undefiniert.
Es müsste als zuerst noch ein weiteres Element in die TD geschachtelt werden, bspw. ein Div, und dieses dann relative positioniert werden.

gruß,
wahsaga

[Latze Bierknecht]

So langsam wird mir einiges klar.
Ich setze in mein <td> ein <div>, welches ich relative positioniere mit left und top gleich auto. Darin kommen dann mein Foto und mein weißer Hintergrund, beide absolute positioniert, beide gleich groß mit z-Index vom Foto > dem vom Hintergrund.
Ich probiers mal aus und melde mich.

PS: Die Quickbar hat was.

[Cybaer]

Hi,

So langsam wird mir einiges klar.

Das ist bei der Anwendung von opacity auch systemimmanent. ;)

Gruß, Cybaer