[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

[Balu der Bär]

Moin Meflin, leider klappt dies nicht:

Ich habe einer Spalte einer Tabelle ein Hintergrundbild zugewiesen, a'la:

Code:

<td style="background-image: url(datei.jpg);">

In dieser Spalte liegt nun ein Layer drüber, welcher transparent ist sodass das Hintergrundbild durchscheint:

Code:

#layer {
        background-color: rgb(227,227,227);
        filter:alpha(opacity=50);
        -moz-opacity:.50;
        opacity:.50;
}

Und auf diesem Layer liegt noch ein Layer auf dem dann der Text stehen soll, der 100%ig zu sehen sein soll.

Code:

#text {
    color:black;
    text-decoration:none;
}

Das Ganze sieht ungefähr so aus:

Code:

<td style="background-image: url(datei.jpg);">
               <div id="layer">
                    <div id="text">
                                  Text, bis sei voll sichtbar
                    </div>
               </div>
</td>

Wenn ich die Transparenz im Layer text auf 0 setze, bringt das trotzdem nichts. Ich bin mit meinem Latein langsam am Ende. :-(

[Meflin]

Jap, du musst die Divs auch entschachteln und DANN übereinanderlegen, wirklich ECHT übereinander, d.h. vermutlich führt an position:absolute kein Weg vorbei ;) Dann geht das auch, 100%. Ich machs ja auch so :mrgreen:

Sollte dir da doch noch was praktischeres Einfallen zum übereinanderlegen dann lass es mich wissen :stupid:

[Balu der Bär]

Das ist eine wirklich grauenhafte Lösung die Layer einfach übereinander zu legen, genau das wollte ich verhindern. :-(

[DGL-luke]

schon mal versucht, den text in die tabelle und das tzransparente ins div? und das div dann transparent machen?

[Balu der Bär]

Die Idee ist gut, klappt leider nicht, es bleibt alles transparent... :gruebel: