✔ Transparente Seite

[Bicko]

Hi,

ich lese mich jetzt schon durch zig Seiten im www, finde aber einfach keine Lösung für mein Problem. Meine Webseite hat in einem div Container ein Hintergrundbild. Nun möchte ich darauf einen weiter div Container plazieren mit weissem Hintergrund und transparent, so das das Hintergrundbild leicht durchschimmert.

Eigentlich kein Problem mit

filter: alpha(opacity=10);
-moz-opacity: 1;

aber dadurch wird ja auch die Schrift leicht transparent, was ich nicht möchte. Sicherlich kennen einige das Problem, aber wie löst man das? Irgendwie habe ich keine Lösung gefunden. Hat jemand einen Tip?

Würde mich wirklich freuen. Vielen Dank schonmal.

Gruss Bicko

 

[Maik]

Hi,

wenn der Container eine fixe Höhe besitzt, könntest du den Text in eine weitere Ebene einbetten, und diese über der "Opacity"-Ebene schichtpositionieren:

div.opacity {
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
width: 400px;
height: 200px;
background: #fff;
}

div.no_opacity {
position: relative;
z-index: 2;
margin-top: -200px; 
width: 400px;
height: 220px;
color: #000;
}

<div class="opacity"></div>
<div class="no_opacity">
     <p>Test Test Test</p>
     <p>Test Test Test</p>
</div>

 

[Bicko]

Dein Ansatz funktioniert tatsächlich soweit, vielen dank dafür. Eine Frage habe ich aber noch, warum müssen die beiden div's eine Höhe haben?

Komisch gerade war doch noch ein anderer Beitrag und nun ist der weg.... seltsam, dabei hat der doch funktioniert.

 

[Maik]

In diesem Lösungsansatz wird der Container no_opacity mit dem negativen margin-top-Wert über den Container opacity "geschoben", deshalb ist die Höhe erforderlich.

Eine elegantere Lösung anstelle des Opacity-Filters wäre aber eine halbtransparente PNG-Grafik als Hintergrundbild, die die zweite (zusätzliche) Box überflüssig macht.

 

[Bicko]

... und wie stellt man eine halbtransparente Hintergrundgrafik her, wenn ich mal so blöd fragen darf?

 

[Maik]

Ich nutze zum Erstellen halbtransparenter PNGs GIMP.

Eine deutsche Windows-Version gibt's natürlich auch -> http://www.chip.de/downloads/c1_downloads_12992070.html

 

[Maik]

Ich hab dir mal ein Beispiel incl. "IE6-Workaround" erstellt, da dieser transparente PNGs nicht darstellen kann.