CSS -Hintergrundfarbe Deckkraft
Beispiel 1:
Öffnen Sie die HTML -Datei und erstellen Sie vier Überschriften in der HTML. In diesem Tutorial verwenden wir das Visual Code Studio, um diese Codes von HTML und CSS auszuführen. Wir erstellen die HTML -Datei in dieser Software und schreiben die HTML. Der Code ist im folgenden Bild bereitgestellt:
Dies ist das Bild des oben erwähnten HTML -Code. Wir werden die Hintergrundfarbe der Deckkraft aller Überschriften ändern und Ihnen die Farbe mit unterschiedlichen Deckkraftwerten zeigen.
CSS -Code:
Wir erstellen eine CSS -Datei, in der wir die CSS -Eigenschaft verwenden, um die Deckkraft der Hintergrundfarbe der oben genannten Überschriften zu ändern. In diesem Code verwenden wir die Eigenschaft „Deckkraft“ von CSS.
Für die Überschrift 1 "H1" setzen wir die "Hintergrundfarbe" auf "Gelb". Die „Deckkraft“ ist „0.4 ”für diese Überschrift und die Schriftfarbe ist" schwarz ". Die Überschrift 2 „Hintergrundfarbe“ ist ebenfalls „gelb“, aber die „Deckkraft“ ist hier „0.6 ”. Die „Hintergrundfarbe“ von Heading 3 ist ebenfalls „gelb“, aber diesmal ist die „Deckkraft“ „0.8 ”. Jetzt kommt die Überschrift 4. Die „Hintergrundfarbe“ entspricht den vorherigen Überschriften, aber wir verwenden hier nicht die Farbe „Deckkraft“. Die „Hintergrundfarbe“ der vierten Überschrift erscheint also als ursprüngliche „gelbe“ Farbe.
Ausgang:
Der Unterschied im Opazitätswert der Hintergrundfarbe wird in dieser Ausgabe gezeigt. Sie können den Unterschied zwischen der Deckkraft der Farbe in diesem Bild sehen.
Die erste Hintergrundfarbe für Überschriften zeigt mehr Transparenz, da der Deckkraftwert der Hintergrundfarbe „0 ist.4 ”. Die zweite Überschrift ist weniger transparent als die Hintergrundfarbe der ersten Kämpfe, da sein Deckkraftwert „0 ist.6 ”. Dann ist die Hintergrundfarbe des dritten Kopfes wie die zweite Überschrift weniger transparent als die zweite. Diesmal lautet die „Deckkraft“ „0.8 ”. Und in der letzten Überschrift haben wir die ursprüngliche gelbe Farbe verwendet, ohne dass ein Deckkraftwert verwendet wurde.
Beispiel #2:
In diesem HTML -Code haben wir zwei Überschriften und vier Absätze. Jeder Absatz ist in der "Div" -Klasse geschrieben und diese "DIV" -Kurse werden als "First", "Second" bzw. "dritter" bezeichnet. Wir werden diese Div -Namen verwenden, wenn wir diese Absätze in CSS stylen. Wir werden die Opazität der Hintergrundfarbe jedes Absatzes ändern.
CSS -Code:
Dies ist der CSS -Code, in dem wir die Farbe der Überschrift 1 als "grün" festlegen. Der Text der Überschriften 1 und 2 ist im „Zentrum“ mit dem "Text-Align" ausgerichtet. Setzen Sie die „div“ -Genher -Hintergrund „grüne“ Farbe mit „RGB (0, 151, 19)“. Die "Polsterung" ist "10px" von links, rechts, oben und unten ". Die hier verwendete "Text-Align" ist "Rechtfertigung" . Verwenden Sie nun die erste DIV, in der wir die Hintergrundfarbe mit dem Deckkraftwert von „0.2 ”und ist in Form von„ RGBA (0, 151, 19, 0) geschrieben.2) ". Der „Deckkraftwert“ hier ist „0.2 ”“. Der Wert "Alpha" repräsentiert die "Deckkraft". Die Hintergrundfarbe des zweiten Divs ist ebenfalls grün mit dem Alpha -Wert von „0).4 ”. Der Alpha -Wert für die dritte Div ist „0.7 ”mit der gleichen grünen Farbe.
Ausgang:
Hier können Sie sehen, dass der erste Absatz mehr Transparenz als der zweite Absatz zeigt, da der Alpha- oder Opazitätswert für den ersten Absatz „0 ist.2 ”, was bedeutet, dass es 20%Opazität hat. Der zweite Absatz der Deckkraft oder des Alpha -Wertes lautet „0.4 ”und es ist weniger transparent als der erste Absatz. In der Hintergrundfarbe des dritten Absatzes lautet der Alpha -Wert „0.7 ”und Sie würden feststellen, dass es weniger transparent ist. Im letzten Absatz ist die Hintergrundfarbe die ursprüngliche „grüne“ Farbe. Wir haben in der letzten Überschrift keinen Alpha -Wert verwendet.
Beispiel #3:
Für das dritte Beispiel werden wir mit der „ID“ verschiedene Überschriften in HTML schreiben und diese „ID“ später verwenden, um diesen Überschriften in CSS unterschiedliche Stile zu verleihen.
CSS -Code:
In diesem CSS -Code ändern wir die Hintergrundfarbe einer Farbe und verwenden auch die Originalfarbe im nächsten Absatz. Weitere Informationen finden Sie im folgenden Bild für den CSS -Code:
Hier verwenden wir die Absatz -ID und geben dann die Hintergrundfarbe für alle Absätze an. Für „P1“ setzen wir die „RBGA (255, 0, 0, 0).3) “, der der Code der„ roten “Farbe mit einem Alpha -Wert von„ 0) ist.3". Für „P11“ verwenden wir dieselbe Farbe, jedoch ohne Alpha- oder Opazitätswert. Das "P2" wird als "RGBA (0, 255, 0, 0" eingestellt.4) “, der der Code der„ grünen “Farbe ist und sein Alpha -Wert ist„ 0.4 ”. Als nächstes hat der „p22“ die gleiche „grüne“ Farbe ohne Alpha -Wert. Der "p3" -Rgba -Wert lautet "(0). 0. 225, 0.5) “, die die„ blaue “Farbe mit einem Alpha -Wert von„ 0) ist.5 ”. Der „P33“ hat die ursprüngliche „blaue“ Farbe und keine Deckkraft. Der „P5“ hat den Deckkraftwert von „0.7 ”und der Farbcode ist„ RGBA (255, 255, 0, 0).7) ", der" Gelb "darstellt. Der „P55“ enthält keinen Alpha -Wert. Die „P6“ -Farbe ist „rosa“ mit einem Deckkraftwert von „0).8 ”und der Code wird als„ RGBA (255, 0, 255, 0) geschrieben.8) ". Der letzte Absatz, "P66", hat die "Hintergrundfarbe" von "Pink" ohne Deckkraft.
Hier ist die Hintergrundfarbe des ersten Absatzes rot, aber mit einem Deckkraftwert von 0.3, was es transparenter macht. Der nächste Absatz enthält die ursprüngliche rote Hintergrundfarbe und Sie können den Unterschied zwischen der ursprünglichen Farbe und der Farbe leicht beobachten, wenn wir den Depazitätswert verwenden. Im dritten Absatz wird die Hintergrundfarbe als grün mit einem Deckkraftwert von „0) angezeigt.4 ”. Im vierten Absatz ist die Hintergrundfarbe ohne Alpha -Wert „grün“. Die „blaue“ Farbe im fünften Absatz wird angezeigt und sein Deckkraftwert lautet „0.5 ”. Die ursprüngliche „blaue“ Hintergrundfarbe ist auch im Absatz „Sechster“ gezeigt. Der nächste Absatz zeigt eine „graue“ Farbe, die mit einem „0 verwendet wird.6 ”Deckkraftwert und dieses ursprüngliche Grau wird auch im nächsten Absatz als Hintergrundfarbe verwendet. Die „gelbe“ Farbe hat „0.7 "Deckkraft, während" Cerise "" 0 hat "hat.8 ”. Beide Originalfarben werden auch in den Hintergrundfarben des Absatzes angezeigt.
Abschluss
Dieses Tutorial wird für Sie bereitgestellt, damit Sie das Konzept der Hintergrundfarbe in CSS lernen können. Wir haben zwei Methoden gelernt, um die Opazität zu ändern: Einer ist die Verwendung der Eigenschaft „Depazität“ und der andere wird mit „RGBA“ verwendet, in der „Alpha“ zum Festlegen des Transparenzwerts der Hintergrundfarbe verwendet wird. Wir haben die Hintergrundfarben mit Deckkraft oder Alpha -Wert und ohne Deckkraftwert im Detail gezeigt. Probieren Sie diese Beispiele aus und verwenden Sie diese Opazitätswerte in Ihren Codes.