Mit CSS opacityunter Mozila

[wasabi37]

Hi,

ich würde gerne ein DIV leicht durchsichtig machen, so dass man das Hintergrundbild noch sieht:

  
<div>  
Durchsichtig  
</div>  

  
div  
{  
filter:Alpha(opacity=50);  
}  
body  
{  
background-color=red;  
}  

Unter IE fnktioniert es problemlos. Wenn ich aber Mozilla benutze bleibt es folkommen undurchsichtig.

[Gunnar Bittersmann]

@@wasabi37:

nuqneH

div
{
filter:Alpha(opacity=50);
}

Unter IE fnktioniert es problemlos. Wenn ich aber Mozilla benutze bleibt es folkommen undurchsichtig.

'filter' ist eine proprietäre Microsoft-Erfindung; das kann nur in IEs funktionieren. Und dass es außer Internet Explorern und Mozillas noch andere Browser gibt, weißt du?

Verwende die CSS-Eigenschaft opacity!

body
{
background-color=red;
}

Das kann in keinem Browser funktionieren. Der CSS-Validator macht dich auch auf Syntax-Fehler aufmerksam.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, wasabi37!

div
{
filter:Alpha(opacity=50);
}

  
  
Für andere Browser kann man die opacity-Eigeschaft verwenden (1 = 100% = undurchsichtig) ggf. mit browserspezifischem Präfix zum Beispiel -moz-opacity für ältere FF.  
  
Matthias

-- 
1/z ist kein Blatt Papier.  
![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  

[Daniel.S]

ggf. mit browserspezifischem Präfix zum Beispiel -moz-opacity für ältere FF.

So alte Mozillas gibts nicht mehr. opacity wird seit über 7 Jahren unterstützt.

[misterunknown]

Moin,

ich würde gerne ein DIV leicht durchsichtig machen, so dass man das Hintergrundbild noch sieht:

Eine weitere (universelle) Möglichkeit, ist, für das DIV einen halbtransparenten Hintergrund zu verwenden.
Beispiel.

Grüße Marco

[Gunnar Bittersmann]

@@misterunknown:

nuqneH

Eine weitere (universelle) Möglichkeit, ist, für das DIV einen halbtransparenten Hintergrund zu verwenden.

Aber keine gute (unnötige zusätzliche Ressource).

Qapla'

[misterunknown]

Moin,

Eine weitere (universelle) Möglichkeit, ist, für das DIV einen halbtransparenten Hintergrund zu verwenden.
Beispiel.

Das hat den Vorteil, dass nicht der gesamte DIV transparent ist. Denn sonst wäre auch Text oder eventuell enthaltene Bilder transparent.

Grüße Marco

[Gunnar Bittersmann]

@@misterunknown:

nuqneH

Das hat den Vorteil, dass nicht der gesamte DIV transparent ist. Denn sonst wäre auch Text oder eventuell enthaltene Bilder transparent.

Wie gesagt: Das hat den Nachteil einer unnötigen zusätzlichen Ressource.

Wenn nur die Hintergrundfarbe transparent sein soll, verwendet man eine rgba-Farbangabe.

Qapla'

[misterunknown]

Moin,

Wenn nur die Hintergrundfarbe transparent sein soll, verwendet man eine rgba-Farbangabe.

Unter 2 Voraussetzungen:
1. Browser unterstützt CSS3
2. Man hat nur eine Hintergrundfarbe und kein Hintergrundbild mit Muster o.ä.

Außerdem: Bei den Datenmengen, die heutzutage beim surfen über die Leitung gehen, machen die 237 Bytes den Kohl nicht fett, zumal Hintergrundbilder ja generell meist relativ klein gehalten sind.

Grüße Marco

[MudGuard]

Hi,

Außerdem: Bei den Datenmengen, die heutzutage beim surfen über die Leitung gehen, machen die 237 Bytes den Kohl nicht fett,

237 Byte? Das reicht nicht mal für den Request, geschweige denn für die Response.

Bedenke außerdem, daß Browser nicht beliebig viele Requests gleichzeitig auf denselben Server loslassen.

cu,
Andreas

[misterunknown]

Moin,

237 Byte? Das reicht nicht mal für den Request, geschweige denn für die Response.

Ein Request ist jedenfalls in der Regel doch nur wenige Bytes groß und die Response sollte auch nicht viel größer als 237 Bytes sein. Selbst wenn man auf 1KB kommt ist das verschwindend gering.

Bedenke außerdem, daß Browser nicht beliebig viele Requests gleichzeitig auf denselben Server loslassen.

Das ist vollkommen richtig, aber selbst bei einem 56k-Modem dauert alles -natürlich nur theoretisch- nur 1/7 Sekunden.

Abgesehen davon ist es eben, wie ich schon geschrieben habe, per CSS nur möglich, wenn der Hintergrund des Divs ein einfarbiger sein soll, und kein Bild.

Grüße Marco

[wasabi37]

Danke an alle.

wasabi37

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Wenn nur die Hintergrundfarbe transparent sein soll, verwendet man eine rgba-Farbangabe.

Ein Beispiel.

Für 'body' wurde erst eine Hintergrundfarbe opak gesetzt – als Fallback für Browser, die die nachfolgende rgba-Angabe nicht kennen.

Qapla'