Text hinterlegen

[Koken]

Der Text soll auf einem Hintergrund sein der es aber erschwert den Text zu lesen. Ich brauche also eine halbtransparente "unterlage".
An sich wäre das kein Problem man könnte einen Div-Layer mit folgendem Style dort hinschieben

<div style="position:absolute; left:100px; background-color:#FFFFFF; filter:Alpha(opacity=10)"> unterschiedlich langer Text </div>

schreibe ich den Text in den Layer wird der Text ebenfalls transparent und ist somit wieder nicht gut lesbar.

lege ich einen weiteren Layer über den ersten also so:

<div style="position:absolute; left:100px; z-index:1; background-color:#FFFFFF; filter:Alpha(opacity=10)"></div>

<div style="position:absolute; left:100px; z-index:2;">
unterschiedlich langer Text </div>

weiß der "Unterlage Layer" nicht wie hoch er sein muss.

habt ihr irgendwelche Ideen? Danke für eure Hilfe

[Frederik]

Hallo!

Tranzparente Hintergründe kann man z.B. mit halbtransparenten PNGs realisieren. Die kann man als background-image einbinden, und fertig. Dann ist die Größe 100% flexibel.

Nachteil: Der IE kennt keine PNG-Transparenz. Dass es sich doch lösen lässt, sieht man z.B. auf http://www.electric-lemon.de/. Dort ist das für den IE mit folgender CSS-Angabe gelöst:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='hintergrund.png',sizingMethod='scale');

Es gibt auch noch die -moz-opacity CSS-Eigenschaft, aber die ist dann Mozilla/Firefox-spezifisch. Die neue CSS3-Eigentschaft opacity kennen auch nur Moz/FF und wohl der Safari.

Das Problem mit der transparenten Schrift bleibt wahrscheinlich bei den CSS-Lösungen, im Gegensatz zu der PNG-Lösung. Die wird dann auch noch vom Opera verstanden, scheint mir also die praktikabelste Lösung.

Liebe Grüße
Fredo