Der Blur-Effekt oder die Unschärfe ist eine der beliebtesten Web-Design-Techniken, die dazu beitragen, ein beeindruckendes und einzigartiges Aussehen Ihrer Website zu schaffen. Es fügt dem Hintergrund Weichheit und Tiefe hinzu, wodurch es weniger scharf und für das Auge attraktiver wird.
Um einen Blur-Hintergrundeffekt zu erzeugen, können Sie die CSS-Eigenschaft "filter" mit der Funktion "blur" verwenden. Mit dieser Eigenschaft können Sie verschiedene Filter auf Elemente einer Webseite anwenden, einschließlich Unschärfe.
Die Anwendung des Blur-Effekts auf den Hintergrund ist ganz einfach. Wählen Sie das Element aus, auf das Sie den Effekt anwenden möchten, und fügen Sie den entsprechenden CSS-Code hinzu. Wenn Sie beispielsweise eine Unschärfe für den Hintergrund des gesamten Dokumentkörpers erstellen möchten, können Sie den folgenden Code verwenden:
In diesem Beispiel gibt der Wert "5px" die Anzahl der Pixel für die Unschärfe an. Sie können diesen Wert je nach gewünschtem Effekt anpassen. Je größer der Wert ist, desto auffälliger wird die Hintergrundunschärfe.
Wie füge ich einen Hintergrundunschärfeeffekt mit CSS hinzu
Sie haben vielleicht bereits bemerkt, dass einige Websites einen Hintergrund haben, der aussieht, als wäre er verschwommen. Dies erzeugt einen Tiefeneffekt und eine Bewegung, wodurch die Website für die Augen der Nutzer attraktiver wird.
Um einen Hintergrundunschärfeeffekt hinzuzufügen, müssen Sie die CSS-Eigenschaft verwenden backdrop-filter. Mit dieser Eigenschaft können Sie verschiedene Filter auf den Hintergrund eines Elements anwenden.
Hier ist ein Beispiel für CSS-Code, der einen Hintergrundunschärfeeffekt hinzufügt:
In diesem Beispiel legen wir die Eigenschaft fest backdrop-filter mit Wert blur(10px). Bedeutung blur gibt die Anzahl der Pixel an, um die der Hintergrund des Elements verwischt werden soll.
Sie können den Wert ändern blur abhängig von Ihren Vorlieben und Designanforderungen.
Es ist jedoch erwähnenswert, dass nicht alle Browser die Eigenschaft vollständig unterstützen backdrop-filter. Daher wird empfohlen, die Kompatibilität mit verschiedenen Browsern zu überprüfen, bevor Sie diese Eigenschaft verwenden.
Methode 1: Verwenden der Eigenschaft backdrop-filter
Sie können die Eigenschaft backdrop-filter auf ein Element mit einem beliebigen Hintergrundtyp anwenden, einschließlich eines Bildes, einer Farbe oder eines Farbverlaufs. Wenn Sie beispielsweise ein Element mit einem Bildhintergrund haben, können Sie den Unschärfeeffekt wie folgt hinzufügen:
backdrop-filter: blur(10px); /* Legen Sie den Unschärfewert fest */
Im obigen Beispiel wird für ein Element mit der Klasse "blur-background" ein Hintergrundbild festgelegt und ein Unschärfeeffekt mit einem Radius von 10 Pixeln angewendet.
Die Eigenschaft backdrop-filter unterstützt auch andere Werte, um verschiedene Effekte zu erzeugen, einschließlich Helligkeit, Kontrast, Sättigung usw. Sie können mit diesen Werten experimentieren, um den gewünschten Unschärfeeffekt für Ihren Hintergrund zu erzielen.
Es ist wichtig zu beachten, dass die Eigenschaft backdrop-filter in allen Browsern nicht unterstützt wird. Daher wird empfohlen, alternative Methoden zu verwenden, um die browserübergreifende Kompatibilität zu gewährleisten, z. B. die Verwendung von CSS-Filtern oder das Verwischen von Bildern mit Hilfe von Bildbearbeitungsprogrammen.
Methode 2: Verwenden von Hintergrundbild und Filtern
1. Sie benötigen ein Hintergrundbild für Ihr Element. Sie können jedes Bild im JPEG-, PNG- oder GIF-Format verwenden.
2. Legen Sie in CSS die Eigenschaft background-image auf Ihr Element fest und geben Sie den Pfad zu Ihrem Hintergrundbild an:
- background-image: url(Bildpfad);
3. Wenden Sie dann die Unschärfe mithilfe der CSS-Eigenschaft filter auf Ihr Hintergrundbild an:
- filter: blur(Wert für den Unschärfewert);
Hier kann der Unschärfewert in Pixeln (px) oder in Prozent (%) angegeben werden. Je größer der Wert ist, desto stärker wird die Unschärfe.
.blur-background
4. Fügen Sie den Rest der erforderlichen Stile für Ihr Element hinzu und geben Sie seine Abmessungen an:
- width: die Breite des Elements;
- height: Elementhöhe;
5. Als Ergebnis wird Ihr Element ein Hintergrundbild mit einem Unschärfeeffekt haben:
Anmerkung: Vergessen Sie nicht, die Unterstützung von CSS-Filtern durch den Browser zu überprüfen, da einige ältere Browserversionen diese Funktionalität möglicherweise nicht unterstützen.
Methode 3: Verwenden eines Pseudoelements
Mit dieser Methode können Sie einen unscharfen Hintergrund mit CSS-Pseudoelementen erstellen. Der Vorteil dieser Methode besteht darin, dass Sie einen Unschärfeeffekt nur für den Hintergrund erstellen können, ohne den Inhalt des Elements zu beeinflussen.
Zunächst müssen Sie den Container definieren, für den Sie einen Hintergrundunschärfeeffekt erstellen möchten. Sie können beispielsweise ein beliebiges Element verwenden oder .
Dann können Sie das Pseudo-Element ::before oder ::after verwenden, um einen unscharfen Hintergrund zu erstellen. Sie müssen den Inhalt dieses Pseudoelements vor oder nach dem Hauptinhalt des Containers platzieren.
.blur-container .blur-container::before
In diesem Beispiel erstellen wir einen Container mit einer Klasse blur-container und stellen Sie das Hintergrundbild mit der Eigenschaft background-image ein. Verwenden Sie dann das Pseudoelement ::before. Wir erzeugen einen unscharfen Hintergrundeffekt, indem wir den Unschärfenfilter blur() mit einem Wert von 10 Pixeln anwenden.
Denken Sie daran, dass Sie für jedes Element unterschiedliche CSS-Klassen und -Eigenschaften verwenden müssen, um den Hintergrundunschärfeeffekt auf andere Elemente anzuwenden.
