Durchsichtige divs mit farbe

hat jemand ne ahnung wie ich durchsichtige divs machen mit hintergrundsfarbe
meinetwegen das es rot ist, aber durchsichtig

hää?
Meinst du, du willst ein div mit rotem Hintergrund machen das Teilweise Transparent ist?
Wenn ja ->
www.ajax-community.de/probleme-loesungen/4645-div-container-inkl-inhalte-transparent.html
www.dreamincode.net/code/snippet188.htm
www.css4you.de/trickkiste/tr00019.html
Einfach bei Google suchen.

danke genau das was ich gesucht habe...
hmm iwie mag ich google nicht
bei mir hat er zwar auch transparente divs angeboten aber nicht mit hintergrundsfarbe^^

Google mal nach "opacity" da wirst was finden.
Die massigen Links musst dann schon selber belesen

Ich hab jetzt keinen Bock, alle Links zu durchsuchen, aber bei css4you wenigstens ist es nciht ganz vollständig, deshalb nochmal:
* -moz-opacity ist das CSS-Attribut für Mozilla-Browser (bzw allgemein Geckos), das hat nicht zufällig Ähnlichkeit mit...
* opacity, dem Attribut aus CSS3, was Firefox, Safari, Opera kann (aber CSS 3 ist eigentlich noch gar nicht verkündet)
* filter ist eine IE Attributsache.
Rein nach Standard gibt es keine Lösung, die zweite wäre, wenn man nach CSS 3 validiert. In der Praxis kann und muss man 2 und 3, wahrscheinlich besser sogar alles zusammen machen.
1 ist genauso "schlimm" wie 3. Bevor hier jemand von und für und gegen wegen Standards wettert..

Was in allen modernen Browsern* ohne Trickserei geht: in den Hintergrund des Divs ein Bild mit einer Farbe und entsprechender Alpha-Transparenz legen. Das Bild kann auch nur 1 Pixel groß sein, man kann das ja einfach im Hintergrund kacheln.
*) Der IE6 ist von 2001 und damit keineswegs mehr modern.

Das was knalli geschrieben hat stimmt schon, aber es fehlt noch die Transparenz im Konqueror (dem Standardbrowser von KDE für Linux/BSD). Auch wenn viele Linuxer den Firefox benutzen, sollte man die nicht unter den Tisch fallen lassen.
Ich hab das mal in der Snippets-DB ergänzt....

filter:alpha(opacity=50); /** IE **/
-moz-opacity:0.5; /** Mozilla **/
opacity: 0.5; /** CSS3, Safari **/
-khtml-opacity:0.5; /** Konqueror **/

Und da soll noch jemand sagen, wegem die IE benötige man immer Extrawürste
btw: die filter-Sache sollte mit dem ie6 auch gehen, im gegensatz zu der ineffizienten sache mit dem alpha-image. also, dafür, dass man nur (halb-)transparenz haben will, ist ein zusätzliches übertragungselement eigentlich ineffizient

also die lösungsansätze funktionieren soweit
allerdings ist nicht nur der background dabei durchsichtig sondern auch die schrift
ich habs jetzt erstmal mit nem hintergrundsbild behoben
aber mir würde eine variante ohne css besser gefallen
hat jemand ein vorschlag?

test

Das ganze Element wird transparent dargestellt, also natürlich auch der Inhalt (Text).
Also mögliche Lösungen schlage ich absolute oder relative Positionierung vor, je nach Situation.

Original von Browser-Games World
also die lösungsansätze funktionieren soweit
allerdings ist nicht nur der background dabei durchsichtig sondern auch die schrift
ich habs jetzt erstmal mit nem hintergrundsbild behoben
aber mir würde eine variante ohne css besser gefallen
hat jemand ein vorschlag?

test

wie wäre es mit einem transparenten PNG als background. Für eine Farbe reicht schon ein Pixel mit repeat-xy

Original von Klaus

Original von Browser-Games World
also die lösungsansätze funktionieren soweit
allerdings ist nicht nur der background dabei durchsichtig sondern auch die schrift
ich habs jetzt erstmal mit nem hintergrundsbild behoben
aber mir würde eine variante ohne css besser gefallen
hat jemand ein vorschlag?

test

wie wäre es mit einem transparenten PNG als background. Für eine Farbe reicht schon ein Pixel mit repeat-xy
einmal mein post durchlesen und überlegen was du gesagt hast! danke

du hast ja nicht gesagt, dass dein Hintergrundbild bereits Alpha-transparent ist.
Meine Lösung löst das Problem, dass der Text auch durchsichtig wird.
> [...] aber mir würde eine variante ohne css besser gefallen
WTF?
Versuch es mal mit Flash.

öööhm
wenn ich flasch nutzen möchte würde ich das auch tun^^

Original von BGW
aber mir würde eine variante ohne css besser gefallen

CSS ist nicht *direkt* nötig. Dass die JS-Eigenschaften über das gleiche laufen, ist zwar egal, aber hier gibt es auch eine sozusagen-Alternative:
opacvalue zwischen 0 und 1.
if()element.style.filter = 'alpha(opacity='+opacvalue*100+')';
else element.style.opacity = opacvalue;
Falls du das so gemeint hast, dass du das gerne zur Laufzeit ändern würdest o.ä.

Wenn ich ihn aber jetzt nicht falsch verstanden habe, dann wird in diesem BEispiel aber element's Text auch opacity-transparent dargestellt; und das will er ja nicht?

Nicht schön, aber es macht den Job:
Transparentes 1pixel png als Hintergrund angeben.
Da der IE das nicht kann: Per Browserweiche < IE7 nen Stylesheet einbinden, das den AlphaImageLoader benutzen mit sizingmethod=scale (nicht vergessen dadrin das background-image:none zu setzen und nur absolute Pfade benutzen).
So long...
MrMaxx

in einem anderen Projekt benutze ich zwei absolute Div's dafür

#schleier { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px;
bottom: 0px; right: 0px; z-index: 999; visibility: hidden;
background-image: url('../img/schleier.png');
}
#popbox { position: absolute; width: 80%; left: 10%; right: 10%;
height: 70%; top: 15%; bottom: 15%; z-index: 1000; visibility: hidden;
}
und für den IE

#schleier { filter: alpha(opacity=70); }
welche per JS ein- und ausgeblendet werden.
Die Konstruktion erzeugt einen grauen Schleier über die gesamte Seite, und legt
dann das "popbox" div oben drüber

da ist ja noch mehr CSS, er will eine reine HTML-Lösung. *troll*