[HaBo]

16.03.10, 22:52

Ich bin gerade dabei eine kleine Website zu schreiben. Ich habe dafür ein Hintergrundbild auf dem gesamten Bildschirm.
Die Website ist in drei (Div-)Bereiche eingeteilt. Einen Header, einen Footer und ein Content-Div.
Im Content-Div möchte ich einen grauen, aber transparenten Hintergrund haben, damit die Schrift besser lesbar ist, ich hab aber keine Ahnung, wie ich das am einfachsten umsetzen köönte.

Kann mir da jemand helfen?

beavisbee · 17.03.10, 00:52

css-code:

Code:

		opacity:0.5;
		-modz-opacity:0.5;
		filter:alpha(opacity=50);
		color:rgba(200, 200, 200, 0.5);
		-khtml-opacity:0.5;

Anzeige

- Anzeige -

17.03.10, 14:21

Sehr schön, vielen Dank, das klappt schon mal prima.

Allerdings wird auch die Schrift transparent, die sollte eigentlich schwarz bleiben...

beavisbee · 17.03.10, 15:42

hab gerade noch 'nen Fehler in meinem eigenen Code-Beispiel gefunden:

Code:

        opacity:0.5;
        -modz-opacity:0.5;
        filter:alpha(opacity=50);
        background-color:rgba(200, 200, 200, 0.5);
        -khtml-opacity:0.5;

sollte das noch nicht der Fehler gewesen sein, dann würde ich spontan probieren, noch 'nen DIV ohne Hintergrundfarbe innen rein zu setzen und dort explizit die Transparenz wieder abzuschalten...

Code:

div.transp
{
        opacity:0.5;
         -modz-opacity:0.5;
         filter:alpha(opacity=50);
         background-color:rgba(200, 200, 200, 0.5);
         -khtml-opacity:0.5;
}
div.txt
{
          opacity:1.0;
         -modz-opacity:1.0;
         filter:alpha(opacity=100);
        -khtml-opacity:1.0;
}

HTML-Code:

<div class="transp">
ich bin halb-transparent...
<div class="txt">
... und ich hoffentlich wieder richtig zu lesen!
</div>
</div>

kann für nichts garantieren, da noch nicht ausprobiert, aber das wäre jetzt mal so meine spontane erste Idee.

rami · 17.03.10, 17:22

Zitat:

Zitat von beavisbee

Code:

div.transp
{
        opacity:0.5;
         -modz-opacity:0.5;
         filter:alpha(opacity=50);
         background-color:rgba(200, 200, 200, 0.5);
         -khtml-opacity:0.5;
}
div.txt
{
          opacity:1.0;
         -modz-opacity:1.0;
         filter:alpha(opacity=100);
        -khtml-opacity:1.0;
}

HTML-Code:

<div class="transp">
ich bin halb-transparent...
<div class="txt">
... und ich hoffentlich wieder richtig zu lesen!
</div>
</div>

kann für nichts garantieren, da noch nicht ausprobiert, aber das wäre jetzt mal so meine spontane erste Idee.

Das klappt leider - zumindest in Opera - nicht. Die Transparenz eines Kindelements ist relativ zum Mutterelement angegeben, ein Wert größer als 1 ist aber leider nicht zulässig. Ich habe mir in solchen Fällen bisher immer mit halbtransparenten 1x1-Pixel-GIFs als Hintergrundgrafik beholfen.

Anzeige

- Anzeige -

16.03.10, 22:52	#1 (permalink)
Duminus Guest Likes:	Transparenter Texthintergrund Anzeige Ich bin gerade dabei eine kleine Website zu schreiben. Ich habe dafür ein Hintergrundbild auf dem gesamten Bildschirm. Die Website ist in drei (Div-)Bereiche eingeteilt. Einen Header, einen Footer und ein Content-Div. Im Content-Div möchte ich einen grauen, aber transparenten Hintergrund haben, damit die Schrift besser lesbar ist, ich hab aber keine Ahnung, wie ich das am einfachsten umsetzen köönte. Kann mir da jemand helfen?

17.03.10, 00:52	#2 (permalink)
beavisbee Member of Honour Registriert seit: 22.02.07 Likes: 77	css-code: Code: opacity:0.5; -modz-opacity:0.5; filter:alpha(opacity=50); color:rgba(200, 200, 200, 0.5); -khtml-opacity:0.5;

17.03.10, 15:42	#4 (permalink)
beavisbee Member of Honour Registriert seit: 22.02.07 Likes: 77	hab gerade noch 'nen Fehler in meinem eigenen Code-Beispiel gefunden: Code: opacity:0.5; -modz-opacity:0.5; filter:alpha(opacity=50); background-color:rgba(200, 200, 200, 0.5); -khtml-opacity:0.5; sollte das noch nicht der Fehler gewesen sein, dann würde ich spontan probieren, noch 'nen DIV ohne Hintergrundfarbe innen rein zu setzen und dort explizit die Transparenz wieder abzuschalten... Code: div.transp { opacity:0.5; -modz-opacity:0.5; filter:alpha(opacity=50); background-color:rgba(200, 200, 200, 0.5); -khtml-opacity:0.5; } div.txt { opacity:1.0; -modz-opacity:1.0; filter:alpha(opacity=100); -khtml-opacity:1.0; } HTML-Code: <div class="transp"> ich bin halb-transparent... <div class="txt"> ... und ich hoffentlich wieder richtig zu lesen! </div> </div> kann für nichts garantieren, da noch nicht ausprobiert, aber das wäre jetzt mal so meine spontane erste Idee.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

17.03.10, 14:21	#3 (permalink)
Duminus Guest Likes:	Sehr schön, vielen Dank, das klappt schon mal prima. Allerdings wird auch die Schrift transparent, die sollte eigentlich schwarz bleiben...

[HaBo]

Transparenter Texthintergrund