---

Geschrieben von Misel am 28.05.2007 um 14:19:

  Transparenter Hintergrund eines DIV

Hallo,

für eine Homepage wollte ich die Textelemente in einen weißen DIV-Packen, der ein wenig durchschimmert, damit man das Hintergrundbild sieht.

Mit "opacity" ist das auch kein großes Problem, nur wird dann der Text auch semitransparent. Gibt es eine Möglichkeit, dass der Text nicht durchsichtig wird? Oder läuft es letztlich wirklich darauf hinaus, dass ich noch einen DIV darüberlegen muss?

Danke und Gruß
Misel

---

Geschrieben von LX am 28.05.2007 um 14:31:



Opacity bezieht sich (zumindest im Firefox) sowohl auf Hintergrund-, als auch Vordergrundfarbe. Du wirst also nicht umhin kommen, ein weiteres DIV an die gleiche Stelle zu legen, welches keine Transparenz ausweisen soll. Vereinfacht vielleicht so:

code: 1: 2: 3: 4: <div style="color: #000; position: relative;"> <div style="position: absolute; height: 100%; width: 100%; background: #fff; opacity: .7"></div> Lorem ipsum dolor sit amet </div>

Wobei ich mir mit den Höhen- und Breitenangaben nicht sicher bin, ggf. müsste das äußere DIV auch eine feste Größe bekommen.


Ansonsten könntest du's noch mit verschieden eingetönten Hintergrundbildern versuchen, die dann als "fixed" positioniert werden, allerdings ist die CSS-Interpretation verschiedener Browser da auch unterschiedlich.