template
Index :: CSS :: Opazität / Transparenz
Opazität bedeutet Deckkraft oder Lichtundurchlässigkeit und ist somit das Gegenteil von Transparenz. Im Allgemeinen ist es natürlich egal, ob man einem (visuellen) Objekt nun 75 % Opazität oder 25 % Transparenz zuweist - der Effekt ist der gleiche: das Objekt wird optisch zu einem Viertel durchlässig, d.h. der Hintergrund schimmert etwas durch.
Solche Transparenzeffekte werden eher selten eingesetzt; zum einen, weil ältere Browser sie nicht darstellen können, zum anderen, weil sie oft wie Layout-Spielerei wirken. So mancher Webdesigner verleiht z.B. seinen Pulldown-Menüs und PopUp-Flächen Transparenz, damit man den Inhalt der darunterliegenden Seite noch im Blick hat. Allerdings empfinden es viele Benutzer als anstrengend, einen verblasst wirkenden Text zu lesen, durch den dahinterliegende Grafiken oder gar Textpassagen zu erkennen sind.
Was die CSS-Anweisungen angeht, benutzt der 
MSIE mittels FILTER:alpha(opacity=80) seine Filter-Technologie mit Prozentangabe [0 ... 100], während andere Browser (zumindest 
Mozilla und 
Safari) die OPACITY-Eigenschaft mit Dezimalangabe [0.0 ... 1.0] verwenden.
Eine Browserweiche ist nicht nötig; es werden einfach beide Varianten notiert, z.B.:
.opacity80 { OPACITY:.8; FILTER:alpha(opacity=80); }
Mit Javascript kann die Transparenz etwas flexibler zugewiesen werden, am besten mit einer eigenen Funktion, der man das betreffende Objekt und den Dezimalwert übergibt:
function SetOpaque(obj, value) {
obj.style.opacity = value;
obj.style.filter = 'alpha(opacity='+parseInt(value*100)+')';
}
Falls die Opazität bei einem Objekt keine Wirkung zeigt, kann es daran liegen, dass weder Breite noch Höhe des Objekts definiert wurden - dies betrifft insbesondere den MSIE. Hier hilft dann z.B. die Angabe width='100%' o.Ä. weiter. Sollte auch das nicht funktionieren, handelt es sich entweder um einen Browser, der es nicht unterstützt, wie etwa der 
Konqueror, oder um ein HTML-Element, das grundsätzlich nicht transparent dargestellt werden kann.
Beispiel - Schwarze Schrift in weissem DIV:
Transparenz: 10% |
Transparenz: 20% |
Transparenz: 35% |
Transparenz: 50% |
Beispiel - Tönen eines Bildes (50% Transparenz) durch unifarbenen Hintergrund:
| template |
 |
