Div Hintergrund transparent?

redbull4711 · 06.03.2010

Hallo @ all,

ich habe eine Frage zum Hintergrund in einem Div. Wenn ich diesen (hier schwarz) transparent erscheinen lassen möchte, kann ich das über css bewerkstelligen? Oder geht es wirklich nur über eine gif/png Grafik. Über dem transparenten Hintergrund soll in dem Div Text stehen, der natürlich nicht transparent ist.

Schein einmal vielen Dank

Grüße

msblacky · 06.03.2010

AW: Div Hintergrund transparent?

Hy,

nur gif oder png können Transparenz anzeigen, aber kein jpg.

msblacky

redbull4711 · 06.03.2010

AW: Div Hintergrund transparent?

Dank schon einmal,

leider war das nicht so ganz meine Frage. Habe mich vielleicht falsch ausgedrückt:

Ich erstelle ein Div mit schwarzer Hintergrundfarbe. Gibt es nun einen css Befehl, der dieses Div dann transparent erscheinen lässt. Allerdings lediglich den Hintergrund und nicht den Text, den ich in den / das Div schreibe.

Oder kann ich diese Transparenz lediglich mittels einer Grafik (gif/png) erzeugen?

Grüße

agielen · 06.03.2010

AW: Div Hintergrund transparent?

css ist zwar für das Layout zuständig, um es schöner zu machen, aber es kann nicht von sich aus eine transparenz erzeugen. Man kann opticity einfügen, aber davon würde ich abraten, weil jeder browser darauf anders reagiert. Außerdem könnte das dann irgendwann in der Ausgabe abgeändert werden, wenn css3 offizeill wird. Schau am besten mal hier rein: opticity

redbull4711 · 06.03.2010

AW: Div Hintergrund transparent?

Jau, genau das habe ich gesucht. Aber wie so oft, mal wieder nicht von allen Browsern unterstützt :'(

Danke Dir.

Gackoo_duz · 07.03.2010

AW: Div Hintergrund transparent?

erstelle ein 1px x 1px grosses gif oder png mit der gewünschten Transparenz und bette es als Hintergrund ein
zu sehen bei:
rechts und links die Ränder sind so entstanden

Herr_D · 07.03.2010

AW: Div Hintergrund transparent?

Warum gibst du dem div überhaupt 'ne Hintergrundfarbe?

https://developer.mozilla.org/de/CSS/opacity

Allerdings hat das immer auch einfluss auf den Text

sokie · 07.03.2010

AW: Div Hintergrund transparent?

Gackoo_duz schrieb:
bei:
rechts und links die Ränder sind so entstanden

ohne Not. Bei dem Seitenafbau wäre es einfacher gewesen die Hintergrundgrafik entsprechend zu modifizieren. im IE6 gibs Darstellungsprobleme:

dreiphasenreiniger · 07.03.2010

AW: Div Hintergrund transparent?

Hallo redbull!

background: black;filter:alpha(opacity=80);-moz-opacity: 0.8;opacity: 0.8;

In diesem Fall wäre das eine Transparent von 80%.

Allerdings hat dann auch alles in diesem Container eine Transparenz(Schrift, eingebettete Grafiken).

Guschel · 07.03.2010

du kannst auch wenn du im Div noch Text anzeigen willst der aber nicht Transparent sein soll Rgba verwenden. Rgba ist aber Css3.

Code:

background-color: rgba(255,255,255,0.8);

Zur Vervollständigung
/CSS3 im Detail: RGBa ? Norman's Blog

redbull4711 · 07.03.2010

AW: Div Hintergrund transparent?

Moin

Gackoo_duz schrieb:
erstelle ein 1px x 1px grosses gif oder png mit der gewünschten Transparenz und bette es als Hintergrund ein
zu sehen bei:
rechts und links die Ränder sind so entstanden

Ich denke, dass ich es auch so dann umsetzen werde.

Herr_D schrieb:
Warum gibst du dem div überhaupt 'ne Hintergrundfarbe?

https://developer.mozilla.org/de/CSS/opacity

Allerdings hat das immer auch einfluss auf den Text

Es geht darum dass ich über einem Bild den Contentbereich legen möchte. Damit der Text nicht auf dem Bild verloren geht und alles unübersichtlich wird, möchte ich den Bereich optisch abheben. Das soll eben mit einem Transparenten Bereich geschehen.

dreiphasenreiniger schrieb:
Hallo redbull!

background: black;filter:alpha(opacity=80);-moz-opacity: 0.8;opacity: 0.8;

In diesem Fall wäre das eine Transparent von 80%.

Allerdings hat dann auch alles in diesem Container eine Transparenz(Schrift, eingebettete Grafiken).

Das können aber nur sehr wenige Browser anzeige, oder? Daher ist diese Lösung leider nicht so gut für mich.

Guschel schrieb:
du kannst auch wenn du im Div noch Text anzeigen willst der aber nicht Transparent sein soll Rgba verwenden. Rgba ist aber Css3.

Code:

background-color: rgba(255,255,255,0.8);

Ich denke, ich werde mit dem 1px x 1px gif arbeiten.

Vielen Dank Euch allen.

Grüße

dreiphasenreiniger · 07.03.2010

AW: Div Hintergrund transparent?

@redbull
Alle IE ab 6
Firefox
Mozilla
SeaMonkey
Safari
Opera

Reicht Dir das?
Und ein .gif funktioniert nicht, nur ein .png
Ein transparentes .png zeigt IE6 nicht an.

Guschel · 07.03.2010

AW: Div Hintergrund transparent?

auf was bezieht sich des jetzt? und warum kann der IE6 keine gifs anzeigen?

dreiphasenreiniger · 07.03.2010

AW: Div Hintergrund transparent?

Der IE 6 kann keine transparenten .png darstellen.
Und ein .gif mit Farbtransparenz funktioniert m.M. nach gar nicht.
Probier es halt mal.

Achso meine Antwort bezieht sich auf das Zitat von redbull4711.

Das können aber nur sehr wenige Browser anzeige, oder? Daher ist diese leider nicht so gut für mich.

Guschel · 07.03.2010

AW: Div Hintergrund transparent?

Richtig, da war ich ein bisschen vorschnell , sry

Herr_D · 07.03.2010

AW: Div Hintergrund transparent?

Nur mal so 'ne Frage nebenbei: Lest ihr auch die Sachen, die gepostet werden?

Wenn ja, dann verstehe ich die Posts nicht. Wenn nein: Fangt an...

Aus meinem gesposteten Link:

Code als auch Browsertauglichkeit:

...und nein es geht nicht darum, dass ich die Antwort gepostet habe, sondern darum, dass auch nicht alles 100x gepostet werden muss...

@redbull

Wahrscheinlich mußt du div in div arbeiten... oder die .gif-Variante...

Ich bin noch in der Schule, falls ich heute abend zu Hause noch dazu komme, versuche ich mal was zu basteln...

dreiphasenreiniger · 07.03.2010

AW: Div Hintergrund transparent?

Ich überfliege die Antworten nur, da wo Links sind, klicke ich nicht drauf.
Da habe ich keine Zeit für.
Ich klicke auf Links nur, wenn ich die Frage selber stelle, dann will ich ja auch zwangsläufig jede Info.
Sorry Kumpel, dass ich Dich übersehen habe. Sind eben schnelle Zeiten.

Herr_D · 07.03.2010

AW: Div Hintergrund transparent?

dreiphasenreiniger schrieb:
Ich überfliege die Antworten nur, da wo Links sind, klicke ich nicht drauf.
Da habe ich keine Zeit für.
Ich klicke auf Links nur, wenn ich die Frage selber stelle, dann will ich ja auch zwangsläufig jede Info.
Sorry Kumpel, dass ich Dich übersehen habe. Sind eben schnelle Zeiten.

Ganz großes Tennis...genau so einen haben wir hier noch gebraucht... damit qualifizierst du einen Großteil deiner Beiträge für unseren VIP-Bereich

dreiphasenreiniger · 07.03.2010

AW: Div Hintergrund transparent?

@Herr_D

Wahrscheinlich mußt du div in div arbeiten... oder die .gif-Variante...

Empfehle mir bitte mal ein Tutorial, bei dem ich Alphatransparenz in einem .gif erstellen kann und dieses .gif als transparenten Background in einem Container benutzen kann.

Ich kenne nur eine .png Variante oder die Möglichkeit über CSS.

sokie · 07.03.2010

AW: Div Hintergrund transparent?

mich würde sehr interessieren, wie das Ergebnis aussehen soll.
Die Sache it dem 1x1 gif kann man ganz und gar vergessen, weil gif keine alpha-transparenz darstellen kann,sondern nur eine Farbe als transparent definieren, das heisst diese ist entweder 100% opak oder 100% transparent (zwischenwerte gibts nicht).