opacity: Deckkraft von Elementen

0 | 40217 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "opacity: Deckkraft von Elementen" mit Ihrem Wissen!

Anzeige Hier werben

opacity

Werte: 0 bis 1
Standardwert: 1
Vererbung: Nein
Anwendbar auf:
alle Elemente
CSS-Level: CSS3

Die CSS3 Eigenschaft opacity (engl. Deckkraft) kann die Deckkraft von Elementen steuern. Dadurch ist es möglich transparente Objekte zu erzeugen.

Transparenz verschiedenen Browser

Firefox2Unterstützt3Unterstützt3.5Unterstützt
IE6Unterstützt7Unterstützt8Unterstützt
Opera9.5Unterstützt10Unterstützt
Safari3Unterstützt4Unterstützt
Transparent mit verschiedenen Mitteln

Da die Eigenschaft keiner fertigen Spezifikation angehört, wird sie noch nicht von allen Browsern gleich unterstützt. Mit verschiedenen Eigenschaften lässt sich Transparenz aber in allen Browsern erreichen indem man alle Schreibweisen verwendet.

Firefox2Nein3Unterstützt3.5Unterstützt
IE6Nein7Unbekannt8Unbekannt
Opera9.5Unterstützt10Unterstützt
Safari3Unterstützt4Unterstützt
opacity
Eigenschaft und Beispielwert
Browser
Anmerkung
opacity: 0.2;
Opera, Safari, Firefox ab 3.0
CSS3 Syntax, Wert zwischen 0 (transparent) und 1 (deckend)
-moz-opacity: 0.2;
Mozilla Firefox 2
-moz- Schreibweise für Browserspezifische Erweiterungen (da CSS3 Spezifikation noch nicht fertig)
filter: Alpha(opacity=20);
Internet Explorer
Wert zwischen 0 (transparent) und 100 (deckend)

Für den Internet Explorer muss das Objekt entweder eine feste Breite oder eine feste Höhe besitzen (außer dem img-Tag).

Transparenz in allen browsern  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<style type="text/css">
    div
    {
        filter:     Alpha(opacity=70);
        opacity:    0.2;
        moz-opacity:    0.2;
        background: #b00;
        height:     300px; /* Internet Explorer */
    }
</style>
<div>
    Ein bisschen Text
</div>

Komplementär in JavaScript

 
JavaScript
1
2
3
element.style.filter = "Alpha(opacity=30)"; /* Internet Explorer */
element.style.opacity = 0.2; /* Safari, Opera */
element.style.MozOpacity = 0.2; /* Firefox */

Weiterführend


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 6 Personen an der Seite "opacity: Deckkraft von Elementen" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "opacity: Deckkraft von Elementen" hier bearbeiten.