Lassen Sie uns über die erweiterte Verwendung von RGBA-Attributen sprechen, die derzeit in CSS3 weit verbreitet sind. Das Kompatibilitätsproblem dieses Attributs ist relativ einfach. IE8 unterstützt dieses Attribut bereits, und IE6 und IE7 können es auch durch Hacks unterstützen. RGBA ähnelt dem RBG-Attribut in CSS2, außer dass das RGBA-Attribut eine zusätzliche Definition von Transparenz hat. Die Erklärung des RGBA-Attributs im CSS3-Standard lautet wie folgt:
| /*Grundlegende Syntax*/ em { Farbe : Rgba ( Rot , Grün , Blau , Deckkraft ) } /* Beispiel*/ em { color : rgba ( 255 , 0 , 0 , 1 ) } /* rot, undurchsichtig */ em { color : rgba ( 100 % , 0 % , 0 % , 1 ) } /* Wie oben*/ |
In Wirklichkeit ist die Verwendung von drei Dezimalwerten von 1 bis 255 zur Definition einer Farbe genauer als die Verwendung von Prozentsätzen. Im Folgenden sind die RGB-Werte mehrerer Farben aufgeführt. Bei der Verwendung müssen Sie nur die Hexadezimalwerte konvertieren von 00 bis FF in Dezimal reicht aus.
Die Stärke von RGBA besteht darin, dass durch die Definition von Transparenz und das Mischen von Farben in verschiedenen Ebenen, genau wie beim Mischen von Farben, mehr Farben dargestellt werden können. Beispielsweise legen wir zunächst ein Hintergrundbild für die Seite fest und legen dann eine Farbe für den Inhalt in H1 der Seite fest, zum Beispiel:
|
h1 { Farbe : RGB ( 0 , 0 , 0 ) ; Hintergrundfarbe : RGB ( 255 , 255 , 255 ) ; } |
Aber welchen Effekt hat es, wenn ich für H1 keine Gesamttransparenz (Opazitätsattribut) einstelle?
|
h1 { Farbe : RGB ( 0 , 0 , 0 ) ; Hintergrundfarbe : RGB ( 255 , 255 , 255 ) ; Deckkraft : 0,5 ; } |
Der Effekt, den wir hier sehen, ist, dass das gesamte H1 einschließlich des Textes zu 50 % transparent ist. Die Texttransparenz wirkt sich jedoch auf das Lesen aus. Versuchen wir, die Hintergrundfarbe von H1 mithilfe des RGBA-Attributs separat festzulegen.
|
h1 { Farbe : RGB ( 0 , 0 , 0 ) ; Hintergrundfarbe : rgba ( 255 , 255 , 255 , 0,5 ) ; } |
h1 { |
RGBA kann überall dort verwendet werden, wo eine Farbe festgelegt werden muss, zum Beispiel:
| div { Farbe : RGB ( 0 , 0 , 0 ) ; Hintergrundfarbe : RGB ( 255 , 255 , 255 ) ; Rand : 10 Pixel einfarbiges RGBA ( 255 , 255 , 255 , 0,3 ) ; } |
Stellen Sie die Transparenz auf 30 % und einen durchgehenden weißen Rand mit einer Linienbreite von 10 Pixeln für alle Divs ein.
| div { Farbe : RGBA ( 255 , 255 , 255 , 0,8 ) ; Hintergrundfarbe : rgba ( 142 , 213 , 87 , 0,3 ) ; } div :hover { Farbe : RGBA ( 255 , 255 , 255 , 1 ) ; Hintergrundfarbe : rgba ( 142 , 213 , 87 , 0,6 ) ; } |
Bewegen Sie die Maus darüber, um die Transparenz zu ändern.
Darüber hinaus können RGBA-Attribute in Kombination mit JavaScript noch beeindruckendere Effekte erzeugen.
Ändern Sie Ihre CSS-Schreibgewohnheiten.
In den obigen Beispielen können Sie sehen, dass der Autor rgb() verwendet hat, um Farben anzugeben, anstatt die traditionelle #xxx-Form der hexadezimalen Darstellung zu verwenden. Dies ist eine Schreibmethode, die für das RGBA-Attribut von CSS3 vorbereitet ist. Die Verwendung von rgb() zur Angabe einer Farbe kann als undurchsichtig verstanden werden, aber der Unterschied zwischen den beiden ist sehr gering, was das Upgrade auf rgba sehr erleichtert () in der Zukunft.
Kompatibel mit allen Browsern
Obwohl die neuesten Versionen der Mainstream-Browser bereits RGBA-Attribute unterstützen, müssen wir uns auch um Benutzer kümmern, die ältere Browser verwenden, sodass wir an einigen Stellen mit der alten Methode sicherer sind. Es gibt mehrere Methoden, und jeder kann entsprechend seinen Bedürfnissen wählen.
obwohl dies den Effekt in Browsern niedrigerer Versionen beeinflusst. Dies ist die einfachste und sicherste Methode. Die spezifischen Operationen sind wie folgt:
| h1 { Farbe : RGB ( 127 , 127 , 127 ) ; Farbe : RGBA ( 0 , 0 , 0 , 0,5 ) ; } |
Legen Sie zuerst die RGB-Farbe und dann die RGBA-Farbe fest, sodass Browser, die das RGBA-Attribut nicht unterstützen, nur die RGB-Farbe anzeigen, während Browser, die RGBA unterstützen, aufgrund der Neudefinition die RGBA-Farbe anzeigen.
Der Vorteil des PNG-Formats besteht darin, dass die Transparenzfunktion im Bild auf der Webseite angezeigt werden kann.
| h1 { Hintergrund : transparente URL ( black50.png ) ; Hintergrund : rgba ( 0 , 0 , 0 , 0,5 ) keiner ; } |
Der gleiche Effekt wie bei RGBA wird durch einen PNG-Hintergrund mit einer Transparenz von 50 % erreicht.
kann die privaten Attribute des IE verwenden, um IE6 und IE7 zu lösen, wodurch einige der gleichen Effekte wie bei RGBA erzielt werden können.
| h1 { filter :progid :DXImageTransform.Microsoft.Gradient ( GradientType = 1 , StartColorStr = '#80000000' , EndColorStr = '#80000000' ) ; } |
Ursprünglicher Link: Erweiterte Verwendung von CSS3-RGBA-Attributen.
Vielen Dank an Bolo für seinen Beitrag.