Wie man ein Hintergrundbild in CSS verwischt

In Webanwendungen ist die Verwendung von Hintergrundbildern ein großartiger Ansatz, um eine ästhetisch fundierte Webseite zu erstellen. Manchmal ist es erforderlich, das Hintergrundbild zu verwischen, um sich auf den Inhalt der Seite zu konzentrieren. Darüber hinaus sieht eine Webseite anders aus als Tausende anderer Webseiten. CSS bietet zahlreiche Funktionen, um das Hintergrundbild zu manipulieren.

In diesem Leitfaden werden ein Hintergrundbild in CSS verwischt.

Wie man ein Hintergrundbild in CSS verwischt?

Um das Hintergrundbild in kürzester Zeit verschwommen zu machen, werden wir die CSS -Eigenschaft „Filter“ verwenden. Wenn wir die Filtereigenschaft verwenden.

Lassen Sie uns also in die Details eingehen.

Was ist Filtereigenschaft in CSS?

In CSS, um einige grafische Effekte auf HTML -Elemente zu platzieren, “FilterEigenschaft wird verwendet. Wenn Sie beispielsweise einige Auswirkungen auf ein Bild wie Unschärfe oder Kontrast platzieren möchten, können Sie die Filtereigenschaft verwenden.

Syntax:

Filter: Blur () | Helligkeit () | Hue-rotate () | contrast () | Opazität () | Graustufen () | invert () | Drop-shadow () | sättigen () | Sepia () | url () | keiner

Da die Filtereigenschaft viele Werte hat und wenn wir einige wie Hellness () ausarbeiten.

Lassen Sie uns also tief mit einem Beispiel verstehen, wie wir das Hintergrundbild in CSS verwischen können.

Beispiel

Hier ist ein Hintergrundbild auf unserer Webseite. Lassen Sie es uns verschwommen.

Nehmen Sie in der HTML -Datei eine “Element in der “" Schild.

Html

Gehen wir nun zum CSS -Code:

• Präzisiere das "Hintergrund”Eigenschaft mit dem Wert“URL" Und "No-Repeat”. Dadurch wird das nicht wiederholte Hintergrundbild festgelegt.
• Zu einem geeigneten Raum dem Bild mit “zuordnen“Polsterung"Eigenschaft mit einem Wert"25%”.
• Im nächsten Schritt werden wir zuweisen “Filter”Eigenschaft ein Wert“Blur (9px)Um das Bild verschwommen zu machen. Der Wert innerhalb des Blur () “,“9px”Ermöglicht die Steuerung, wie viel wir das ausgewählte Bild verwischen möchten, wenn wir den Wert auf 10px erhöhen. Dadurch wird das Bild unscharf aussehen. Wenn wir dagegen den Wert auf 6 oder 7px verringern, wird das Bild weniger verschwommen aussehen. Darüber hinaus können wir das Gerät verwenden “remAnstelle von PX.

CSS

div
Hintergrund: URL (Bäume.JPG) No-Repeat;
Polsterung: 25%;
Filter: Blur (9px);

Speichern Sie Ihren Code schließlich und öffnen Sie ihn in Ihrem Browser, um die Arbeit zu überprüfen.

Wir haben erklärt, wie man ein Hintergrundbild in CSS leicht verwischt.

Abschluss

Um das Hintergrundbild zu verwischen, verwenden Sie die CSS “Filter”Eigenschaft mit dem Wert“verwischen()”. Die Wertschöpfung kann geändert werden, um die Unschärfefrequenz eines bestimmten Bildes zu steuern. Sie können den Wert in PX oder REM festlegen, um den Unschärfeeffekt auf das Bild zu erhöhen oder zu verringern. In diesem Artikel wird erläutert, wie ein Hintergrundbild in CSS verwischt werden kann.