Transparenz

[haberkorn]

Hallo alle zusammen!

Ich habe ein kleines Problem bei der Umsetzung einer Homepage mit Contao.
Der Content der Seite besteht eigentlich nur aus einem Hintergrundbild und einer Box, die etwas transparent werden soll. In dieser Box steht dann der Text.

Mein Problem dabei: Wie kann ich die Box transparent setzen?
Und wie funktioniert es, dass NUR die weiße Box transparent wird und nicht auch der Text?
Kann ich das im CSS irgendwie über Background steuern? Ich weiß es leider nicht.

Ich hoffe mir kann da jemand helfen!

Liebe Grüße und vielen Dank im vorraus.

 

[djfabi]

Klar, das geht in CSS3, aber ich würde dir davon abraten, weil dann das ja nicht in IE funzt (-.-) !
Mach dir einfach eine Halb Transparente Bilddatei, und mache die mit :

background-image: url('images/back_transparent.png');
background-repeat:repeat;

So sollte das gehen.
Ich hoffe ich hab dich richtig verstanden ;)

 

[djfabi]

Hier wäre ein Beispiel, um es mit CSS zu machen:

-moz-opacity: 0.50;
-khtml-opacity: 0.50;
opacity: 0.50;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
filter:alpha(opacity=50);

Es ist genau Halbtransparent und geht in vielen
Browsern.
Aber um auf Nummer Sicher zugehen, wird ich ein halb transparentes Bild nehmen, also sowas hier:


Das war's

 

[Banana_Jones]

background: rgb(0,0,0) //Fallback für IE<9
background: rgba(0,0,0,0.5) //0.5 ist hier die Transparenz

Wenn ältere IEs auch noch unterstützt werden sollen, kann man auch zusätzlich mit der Filter-Eigenschaft tricksen

 

[haberkorn]

Ein transparentes Bild einbinden wäre natürlich am einfachsten, aber da die Box auf jeder Seite eine andere Größe haben soll ist das denk ich mal nicht die beste Lösung..

Ich versuche es dann mal CSS und mache einen Fallback für den IE und vertraue auf den gesunden Menschenverstand den IE nicht zu benutzen.

Vielen Dank schonmal!