So legen Sie mit CSS eine Hintergrundunschärfe fest

Beim Erstellen einiger Seiten müssen wir häufig Hintergrundbilder festlegen, damit die Seiten besser aussehen. Wenn die Hintergrundbilder jedoch zu ausgefallen sind, wirkt sich dies auf unseren Hauptinhalt aus. Daher müssen wir das Filterattribut verwenden, um den Unschärfewert festzulegen.

Der HTML-Code lautet wie folgt

<!DOCTYPE html>
<html>
<Kopf>
  <meta charset="utf-8">
  <meta name="viewport" content="width=Gerätebreite">
  <title>JS Bin</title>
</Kopf>
<Text>
<div Klasse="Abdeckung">
  <h1>Ich bin der Inhalt, der hervorgehoben werden muss</div>
</body>
</html>

Aber wenn Sie es direkt auf dem Hintergrundbild verwenden,

.Abdeckung{
    Breite: 600px;
    Höhe: 300px;
    Position: relativ;
    Textausrichtung: zentriert;
    Zeilenhöhe: 300px;
    Farbe: weiß;
    Hintergrund: transparente URL (http://91jean.oss-cn-hangzhou.aliyuncs.com/18-8-31/16567303.jpg) Mitte Mitte, keine Wiederholung;
    Filter: Unschärfe (5px);
    Hintergrundgröße: Abdeckung;
}

Die folgende Situation kann auftreten.

Wir werden feststellen, dass sowohl der Hintergrund als auch der Hauptinhalt unscharf geworden sind.

Lösung: Fügen Sie dem Hintergrundbild ein Pseudoelement hinzu, legen Sie das Hintergrundbild und die Filterattribute für das Pseudoelement fest. Der spezifische Code lautet wie folgt

.Abdeckung{
    Breite: 600px;
    Höhe: 300px;
    Position: relativ;
    Textausrichtung: zentriert;
    Zeilenhöhe: 300px;
    Farbe: weiß;
}

.cover::vorher{    
    Inhalt:'';
    Position: absolut;
    oben: 0;
    links: 0;
    Breite: 600px;
    Höhe: 300px;
    Hintergrund: transparente URL (http://91jean.oss-cn-hangzhou.aliyuncs.com/18-8-31/16567303.jpg) Mitte Mitte, keine Wiederholung;
    Filter: Unschärfe (5px);
    z-Index: -1;
    Hintergrundgröße: Abdeckung;
}

Zusammenfassen

Oben ist die vom Editor eingeführte Implementierungsmethode zum Einstellen der Hintergrundunschärfe mit CSS. Ich hoffe, sie wird allen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!

<<: JavaScript zur Implementierung eines einziehbaren sekundären Menüs

>>: Tiefgreifendes Verständnis der Verwendung von r2dbc in MySQL

jQuery-Plugin zur Implementierung des Minesweeper-Spiels (3)

Artikel

Implementieren Sie Group By basierend auf MySQL, um die neuesten Daten jeder Gruppe zu erhalten

Artikel

Der Unterschied zwischen Update und Select in MySQL für einzelne und mehrere Tabellen sowie Ansichten und temporäre Tabellen

Artikel

Analyse der Prinzipien und Verwendung von Linux-Hardlinks und Softlinks

So legen Sie mit CSS eine Hintergrundunschärfe fest

jQuery-Plugin zur Implementierung des Minesweeper-Spiels (3)

Implementieren Sie Group By basierend auf MySQL, um die neuesten Daten jeder Gruppe zu erhalten

Der Unterschied zwischen Update und Select in MySQL für einzelne und mehrere Tabellen sowie Ansichten und temporäre Tabellen

Analyse der Prinzipien und Verwendung von Linux-Hardlinks und Softlinks

Ein praktisches Tutorial zum schnellen Einfügen von zig Millionen Datensätzen in MySQL

Erstellen Sie eine Bildschirmaufzeichnungsfunktion mit JS

Netzwerkkonfiguration des Host Only+NAT-Modus unter VirtualBox

Detaillierte Analyse von MySQL-Datenbanktransaktionen und -Sperren

Verkürzen Sie die Seiten-Rendering-Zeit, damit die Seite schneller läuft

Kleines Problem mit dem Abstand zwischen Label und Eingabe im Google Browser

Artikel empfehlen

Sogar ein Anfänger kann den Unterschied zwischen typeof und instanceof in js verstehen

Beispielcode zum Partitionieren und Formatieren einer Festplatte größer als 20 TB auf CentOS6

CSS-Beispielcode zum Festlegen des Bildlaufleistenstils

Ausführliche Erläuterung der MySQL-Lern-Engine, Erläuterungen und Berechtigungen

Installationsprozess von MySQL5.7.22 auf dem Mac

Verwenden Sie Angular CDK, um eine Service-Popup-Toast-Komponentenfunktion zu implementieren

Vorteile von MySQL-Abdeckungsindizes

Problem mit der Parameterübergabe beim Sprung auf HTML-Seite

Lösen Sie das Matching-Problem in CSS

So kapseln Sie Timerkomponenten in Vue3

So richten Sie ein Bereitstellungsprojekt unter einem Linux-System ein

Detaillierte Einführung in Protokolle im Linux-System

Ein Artikel zum Erlernen von Fähigkeiten zur Optimierung von MySQL-Indexabfragen

Zusammenfassung des JS-Ausführungskontexts und -umfangs

So reduzieren Sie die Speicher- und CPU-Auslastung von Webseiten