Benötige Hilfe beim Textoverlay

[pimbolie1979]

Hallo Leute,

ich habe einen Slider programmiert der auch schon ganz gut funktioniert. Nun möchte ich über die Bilder ein Textoverlay legen. Hier habe ich jedoch noch probleme mit der Transparenz. Die Positionierung des Overlays funktioniert schon super.

So habe ich das Overlay erzeugt:

Zuerst habe ich einen Div Container erstellt in diesem Div Container befindet sich ein Absatz. Sowohl für den Div Container als auch für den Absatz habe ich CSS Regeln erstellt. Jedoch wenn ich die Transparenz von den Div Container erhöhe (also durchsichtiger gestallte) dann verschwindet auch die Schrift mehr. Genau dies möchte ich aber nicht. Ich möchte das die Transparenz der Div Box unabhängig von der Transparenz der Schrift verändert, sonst kann man die Schrift ja nicht mehr lesen.

#test
{
    width: auto;
    height: auto;
    border: 0px;
    padding: 10px;
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #000000;
    opacity: 0.10;
    z-index: 101;
}


#test p
{
    font-family: Verdana, Geneva, sans-serif;
    font-size:24px;
    color: #FFFFFF;
    opacity: 1;
    z-index: 102;
    display: block;
}

Gastgeber-Deutschland

 

[Tronjer]

Opacity vererbt sich nach unten. Du kannst nicht dem Elternelement 1.0 und dem Child 0.1 geben. Verwende statt dessen lieber rgba().

 

[pimbolie1979]

Vielen Dank für diesen Hinweis :-)

Lohnt es sich die noch für alte Browser kompatible zu gestalten?

 

[Tronjer]

Bei einem gewerblichen Angebot würde ich das schon machen. Aber solange die Seite funktioniert, halte ich es für nicht dramatisch, wenn IE7/8 User ohne Transparenzeffekte auskommen müssen. Wobei es dafür natürlich auch Lösungen gibt. Einfach mal Googeln.

 

[pimbolie1979]

Auf jdenfall vielen Dank für die Hilfe es hat funktioniert und ich bin sehr glücklich darüber.