Verschiedene Methoden zum Verdunkeln des Hintergrundbildes in CSS

Ohne Zweifel verbessern Hintergrundbilder das Erscheinungsbild einer Webseite. Wenn die hinzugefügten Bilder jedoch sehr hell sind und mehrfarbige Effekte haben, können sie eine Seite unattraktiv aussehen, und der Benutzer wird sich unwohl fühlen. In einem ähnlichen Szenario besteht die beste Option darin, die hinzugefügten Bilder zu verdunkeln.

Müssen Sie die Bilder herunterladen und in Photoshop bearbeiten? Absolut nicht! Verschiedene CSS -Eigenschaften können Ihnen für den angegebenen Zweck dienen.

In diesem Bericht erklären wir die verschiedenen Methoden, um Hintergrundbilder mit CSS zu verdunkeln.

Wie man das Hintergrundbild in CSS verdunkelt?

Schauen Sie sich die unten aufgeführten Eigenschaften an, um die Hintergrundbilder mit CSS zu verdunkeln.

• Filtereigenschaft
• Hintergrundeigenschaft
• Hintergrund-Blend-Mode-Eigenschaft

Erforschen wir jede Methode eins nach dem anderen!

Methode 1: Verwenden Sie die Eigenschaft "Filter", um das Hintergrundbild in CSS zu verdunkeln

In CSS, die “FilterDie Eigenschaft wird verwendet, um grafische Effekte auf HTML -Elemente hinzuzufügen, insbesondere auf Bilder. Diese Eigenschaft kann auch helfen, das Hintergrundbild zu verdunkeln, wenn es es istHelligkeit"Wert wird hinzugefügt.

Sehen Sie sich das angegebene Beispiel an, um die Prozedur zu überprüfen, um das Hintergrundbild mithilfe der CSS -Filtereigenschaft zu verdunkeln.

Beispiel

In diesem Beispiel werden wir das folgende Hintergrundbild verdunkeln:

Im ersten Schritt werden wir die „verwenden“Hintergrund”Eigenschaft mit dem Wert“URL ()Um das Hintergrundbild festzulegen; deklarieren das "No-RepeatLassen Sie das Bild nicht mehrmals wiederholen. Dann, "Polsterung" von "15%Wird verwendet, um unserem Behälter den spezifischen Raum zu geben. Zuletzt mit dem “Filter"Eigenschaft und festlegen ihren Wert auf"Helligkeit (40%)”Reduziert das Licht, das auf das Bild strömt und es verdunkelt:

Speichern Sie den hinzugefügten Code in der HTML -Datei und öffnen Sie ihn einfach im Browser oder verwenden Sie die “Live -ServerErweiterung für den gleichen Zweck:

Wie Sie sehen können, wurde das Hintergrundbild mit der CSS -Filtereigenschaft verdunkelt:

Methode 2: Verwenden Sie die Eigenschaft „Hintergrund“, um das Hintergrundbild in CSS zu verdunkeln

Der "HintergrundDie Eigenschaft kann verwendet werden, um das Hintergrundbild, seine Farbe, Größe und Position auf der Webseite festzulegen. Mit anderen Worten, mithilfe der Hintergrundeigenschaft können Sie fast alle Eigenschaften eines Hintergrundbildes gleichzeitig anwenden.

Beispiel

Wir werden jetzt die „verwenden“Hintergrund”Eigenschaft mit dem Wert“linear-Gradient ()”Und platzieren Sie zwei Werte mit dem RGBA -Farbschema darin. Dies erzeugt einen grauen Transparenzschatten über dem Bild und dunkler:

Ausgang

Erfahren Sie nun über die Eigenschaft mit Hintergrundmodellen in der nächsten Methode.

Methode 3: Verwenden Sie die Eigenschaft „Hintergrund-Blend-Mode“, um das Hintergrundbild in CSS zu verdunkeln

Der "Hintergrund-Blend-ModeEigenschaft ist nützlich, wenn die Farbe und ein Bild zusammen am selben Ort existieren. Diese Eigenschaft wird verwendet, um die Bilderschichten mit der Hintergrundfarbe zu mischen. Außerdem wird das Hintergrundbild mit einem bestimmten Wert verdunkelt.

Beispiel

Stellen Sie zunächst die Hintergrundfarbe ein “grau”Für den Behälter mit dem“Hintergrundfarbe" Eigentum. Verwenden Sie im nächsten Schritt den Wert “multiplizieren"Entlang des Grundstücks"Hintergrund-Blend-Mode”. Dadurch wird das Bild gemischt und seine Ebene mit dem Hintergrund mischt: