[CSS] Nicht vollständige Transparenz

[Balu der Bär]

Folgendes Problem:

Ich habe ein div-Element (Link_Panel) welches über einem anderen div-Element (Site_Main) liegt. Das Site_Main-Element hat ein Hintergrundbild. Jetzt möchte ich das das Link_Panel sagen wir mit 50% Transparenz über dem Bild liegt, d.h. das Bild soll auf dem Link-Panel durchscheinen trotzdem soll es sich noch von dem Bild abheben. Stelle ich beim Link_Panel folgendes ein:

Code:

 background-color: transparent;

ist es aber vollständig transparent und das Bild scheint durch. Wie bekomme ich es hin nur einen gewissen Prozentsatz transparent zu machen?

Danke euch,

[alcaeus]

Moin,

AFAIR geht das nicht mit CSS. Eine Moeglichkeit waere, ein transparentes GIF oder ein PNG mit Alpha-Transparenz (vorsicht vor alten Browsern!) zu verwenden, das du als Hintergrundbild vom Container im Vordergrund einstellst:

Code:

<div id="bg">
  <div id="fg">Foobar</div>
</div>

CSS:

Code:

#bg {
  background-image:url('dein_hintergrund_bild.jpg');
}
#fg {
  background-image:url('halbtransparentes_bild.png');
  background-repeat:repeat;
}

Mit einem PNG solltest du gute Ergebnisse erzielen, allerdings hast du da das Problem, dass du den IE6 mit Faustschlaegen auf die Engine dazu bringen musst, sie richtig darzustellen :(

Greetz
alcaeus

[Balu der Bär]

Ohje das kann ja was werden. :roll:

Danke dir erstmal, mal gucken was ich da machen kann.

[chaosben]

Alternativ kannst du es (doch ;)) mit CSS probieren.

Natürlich bleibt die Warnung erhalten: Alte Browser, verschiedene Browser ... :)

[Balu der Bär]

Danke dir, es klappt bestens. :-)

Wegen den Browsern, CSS4You schreibt ab IE 5.5, Netscape 6 und Mozilla 6 kennen alle Browser dieses Feature, da mach ich mir also nicht allzu große Sorgen.

Thx

[alcaeus]

Zitat:

Zitat von chaosben

Alternativ kannst du es (doch ;)) mit CSS probieren.

Danke, wieder was gelernt :)

Greetz
alcaeus

[Balu der Bär]

Ich nochmal:

Alcaeus hatte mich gestern schon drauf hingewiesen, ich habs dann später auch gemerkt, es gibt ein kleines Problem mit dieser Transparenz, nämlich die Links die auf dem Panel sind sind ebenfalls transparent. Diese hätte ich aber gerne normal dargestellt, und nur den Hintergrund des Panels transparent. Wie stell ich das am besten an?

Hier mal der Code von dem Panel:

Code:

.link_panel {
 width: 375px;
 text-align:right;
 background-color: #FFFFFF; 
 word-spacing: 10px;
 filter:alpha(opacity=65);
 -moz-opacity:.65;
 opacity:.65;
            }

Danke euch :-)

[Balu der Bär]

Problem ist gelöst, wenn ich Transparenz des Hintergrundbildes deaktiviere sind auch die Links zu 100% da. :gruebel:

Danke ;)

[Balu der Bär]

Jetzt besteht das Problem abermals.

Ich habe ein div-Element mit einem transparenten Hintergrundbild. Alles Objekte die auf diesem Container liegen sind jetzt ebenfalls transparent, sprich Text, Links und weitere Bilder alles wird transparent dargestellt. Gibt es eine Möglichkeit wie ich dies unterbinden kann? Sodass lediglich das Hintergrundbild transparent erscheint, alle anderen Elemente auf diesem aber zu 100% da sind?

[Meflin]

Nur eine: du musst 2 Divs übereinander legen, im einen die transparenz einstellen, im anderen nicht. Alles andere habe ich shcon (erfolglos) versucht :P