Verdunkeln Sie das Hintergrundbild CSS
Eigenschaften für verdunkeltes Hintergrundbild in CSS:
Wir werden die folgenden drei Eigenschaften verwenden, die das CSS bietet, um das Hintergrundbild zu verdunkeln. Diese Eigenschaften sind:
- Verwenden von Filtereigenschaften.
- Verwenden Sie die Eigenschaft von Hintergrundbildungen und setzen Sie ihren Wert in linearem Gradienten fest.
- Verwenden von Eigenschaften mit Hintergrund-Blend-Mode.
Jetzt werden wir all diese Eigenschaften in unseren Codes unten verwenden und Sie lernen aus diesen Beispielen, wie Sie diese Eigenschaften verwenden und wie Sie den Wert dieser Eigenschaften festlegen, da wir auch alle Codes erklären werden.
Beispiel 1:
Wir verwenden Visual Studio -Code, um die angegebenen Beispiele anzuzeigen. Wir werden also die neue Datei öffnen und die Sprache „HTML“ auswählen, die zur Herstellung einer HTML -Datei führt. In der neu generierten Datei beginnen wir dann mit dem Schreiben des Code. Der ".Die Dateierweiterung der HTML ”wird automatisch an den Dateinamen angehängt, wenn wir den ausgefüllten Code speichern. Jetzt erhalten wir grundlegende Tags, indem wir "putschen"!Markierungen und Drücken von "Eintritt". Wenn in dieser erstellten Datei die grundlegenden HTML -Tags angezeigt wurden, fügen wir zunächst eine Überschrift hinzu.
Dann setzen wir auch einen Absatz unter diese Überschrift und fügen das Bild nach diesem Absatz ein. Wenn das Bild eingefügt wird, haben wir einen weiteren Absatz und auch eine DIV-Klasse mit dem Namen "Dunkled-Image". Hier ist der HTML -Code abgeschlossen. Speichern Sie es nun und wechseln Sie zur CSS -Datei, in der wir die Eigenschaft „Filter“ hinzufügen, um das Hintergrundbild zu verdunkeln.
Für "H1" setzen wir den Wert "Schriftfamilie" auf "algerisch" und wenden auch "Farbe" auf diese Überschrift als "grün" an. Der "Schriftgröße" des Absatztextes lautet "20px" und seine "Farbe" ist "rot", "fett" in seinem "Schriftgewicht" -Beaug in seinem "Schriftgewicht". Dann werden wir die Eigenschaft "Filter" für die Div-Klasse "Dunkled-Image" verwenden. Diese Eigenschaft hilft dabei, das Bild dunkler zu machen. Wir haben diese Eigenschaft hier verwendet, damit das Bild in der Ausgabe dunkler erscheint. Wir setzen seinen Wert mit dem Wert "Helligkeit" und wählen die Helligkeit „60%“ für dieses Bild aus.
Im „Hintergrundbild“ setzen wir den gleichen Weg des Bildes, den wir in der HTML-Datei gegeben haben. Also wenden wir diese dunkle Eigenschaft auf das Bild, das wir oben eingefügt haben. Wir setzen auch die „Breite“ und „Höhe“ des DIV als „200px“ und „620px“. Diese Eigenschaft „Höhe“ setzt die Höhe des Divs und die Eigenschaft „Breite“ setzt die Breite des Divs.
Wir machen dieses Bild zu einem dunkleren Bild mit Hilfe der CSS -Filtereigenschaft und stellen die „Helligkeit“ als Wert dieser Eigenschaft fest. Wir haben dieses Bild „60%“ Helligkeit angewendet, um es dunkler zu machen als das Originalbild.
Beispiel # 2:
Wir haben hier einen Übergang und fügen dann das Bild hinzu. Nach diesem Bild legen wir wieder eine Überschrift und haben dann einen Div -Behälter. Wir werden die zweite Eigenschaft nutzen, um dieses Bild zu einem dunkleren zu machen.
Wir wenden "Farbe" auf diese Überschrift als "Maroon" an und setzen den Wert "Schriftfamilie" für "H1" auf "Algerian" auf "H1". Die „Höhe“ des Bildes ist auf „240px“ eingestellt und seine „Breite“ beträgt „630px“. Anschließend erwähnen wir den Div-Container-„Dunkled-Image“ und setzen die Eigenschaft „Hintergrundbild“ ein, in der wir den "linear Gradienten" verwenden und seinen Wert in "RGBA" -Form einstellen. Hier verwenden wir zwei "RGBA" -Werte und setzen sie auf "RGBA (0, 0, 0, 0).5) “wobei„ 0.5 ”ist der Alpha -Wert. Wir fügen das Bild auch in die "url ()" ein. Wir fügen den Pfad des Bildes in diese "url ()" ein. Die „Höhe“ dieses Divs beträgt „240px“ und definieren auch seine „Breite“ auf „630px“.
In der Ausgabe sind sowohl das ursprüngliche als auch die abgedunkelten Versionen des Bildes zu sehen. Das Originalbild und das abgedunkelte Bild können im Screenshot unten deutlich voneinander unterschieden werden. Das abgedunkelte Bild wird wiedergegeben, weil wir die Eigenschaft „Hintergrundbild“ verwendet haben und seinen Wert im Typ „Linear Gradient“ festlegen.
Beispiel # 3:
Wir haben den obigen HTML -Code verwendet und fügen ein anderes Bild in diesen Code ein. Wir werden den „Hintergrund-Blend-Modus“ verwenden, um den dunklen Bildeffekt auf das Bild zu erstellen.
Wir setzen den Wert "Schriftfamilie" für "H1" auf "algerisch" und wenden "Farbe" auf diese Überschrift auf "Maroon" an. Das Bild "Breite" ist "630px" und seine "Höhe" beträgt "250px". Wir verwenden den Namen der Div-Klasse als „dunkle Image“ und werden einige Eigenschaften darauf anwenden. Wir verwenden die Eigenschaft "Hintergrund" und platzieren den Wert "RGBA" hier. Der "RGBA" -Wert, den wir verwenden, lautet "(0, 0, 0, 0.7) “und dann haben wir die Eigenschaft„ URL “, die wir verwenden, um den Weg des Bildes zu geben. Wir geben den Weg des Bildes als „MyNewimage.PNG ”.
Danach haben wir die Eigenschaft „Hintergrund-Wiederholung“ und verwenden das Schlüsselwort „No-Repeat“ als Wert dieser Eigenschaft. Jetzt setzen wir auch die "Hintergrundgröße" und platzieren "Cover", damit das Bild den gesamten Hintergrund abdeckt. Die Eigenschaft „Hintergrund-Blend-Mode“ dient zur Anwendung des Verdunkelungseffekts auf das Bild. Wir setzen es als das Schlüsselwort "verdunkeln". Wenn dieses Bild auf dem Ausgangsbildschirm rendert, wird es aufgrund dieser Eigenschaft als abgedunkeltes Bild angezeigt. Die „Höhe“ des DIV namens "Dunkel-Image" wird auf "330px" angepasst, und wir setzen auch seine "Breite", die "650px" ist. Schauen Sie sich nun die Ausgabe an, wie diese Bilder erscheinen werden.
Sowohl das Original- als auch die dunkleren Formen des Bildes sind im Ergebnis sichtbar. Hier im folgenden Schnappschuss ist es möglich, den Unterschied zwischen dem Originalbild und dem abgedunkelten Bild leicht zu erkennen. Wir haben das Attribut „Hintergrund-Blend-Modus“ verwendet und das Schlüsselwort „dunkler“ als Wert dieses Attributs platziert, um das dunkle Bild zu machen.
Abschluss
Wir haben dieses Konzept gründlich behandelt und uns zahlreiche Fälle angesehen, wie man das Hintergrundbild in CSS verdunkelt. Wie bereits erwähnt, haben wir drei verschiedene Eigenschaften zum Verdunkeln des Hintergrundbildes verwendet. Wir haben alle drei Eigenschaften in unseren Codes verwendet. Wir haben auch abgedeckt, wie man diese Eigenschaften nutzt und wie sie ihren Wert festlegen können. Wir haben diskutiert, dass wir die Eigenschaft „Filter“, Eigenschaft „Hintergrundbild“ und auch die Eigenschaft „Hintergrund-Blend-Mode“ haben, um das Hintergrundbild dunkler zu machen. Wir haben auch die Ergebnisse all dieser Codes geliefert, in denen wir sowohl die Verdunkelung als auch das Originalbild auf dem Ausgangsbildschirm gemacht haben. Zu Ihrem Vorteil haben wir ein umfassendes Tutorial erstellt, in dem der Code zusammen mit den Ergebnissen sowohl bereitgestellt als auch gründlich erläutert wird.