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

Eine kurze Erläuterung der Manifestation und Wertauswahlmethode von innodb_autoinc_lock_mode

So legen Sie mit CSS eine Hintergrundunschärfe fest

Eine kurze Erläuterung der Manifestation und Wertauswahlmethode von innodb_autoinc_lock_mode

Tutorial zur Installation und Konfiguration einer virtuellen Linux-Maschine unter dem Windows-Betriebssystem

So installieren Sie den Chrome-Browser auf CentOS 7

Zabbix-Konfiguration DingTalk-Alarmfunktions-Implementierungscode

HTML imitiert die Dropdown-Menüfunktion der Baidu-Enzyklopädienavigation

Automatisches Laden des Kernelmodul-Overlayfs-Vorgangs beim CentOS-Start

Beschreiben Sie kurz die MySQL InnoDB-Speicher-Engine

Zusammenfassung gängiger HTML-Elemente, einschließlich Grundstruktur, Dokumenttyp, Kopfzeile, Textkörper usw.

iFrame ist eine großartige Möglichkeit, es als Popup-Ebene zu verwenden, um den Hintergrund abzudecken

Detaillierte Erklärung des MySQL-Sicherungsprozesses mit Xtrabackup

Artikel empfehlen

Detaillierte Anweisungen zum Download und Installationsprozess von MySQL 5.7.18

CSS: besuchte geheime Erinnerungen des Pseudoklassenselektors

Erläuterung der Linux-Kernel-Optimierungskonfiguration für hochparallele Nginx-Server

JavaScript+html zur Implementierung der Sliding-Verifizierung auf Front-End-Seiten (2)

Probleme beim Laden und Blockieren von JavaScript-Dateien: Fallstudie zur Leistungsoptimierung

So richten Sie die passwortfreie SSH-Anmeldung beim Linux-Server ein

MySQL-Cursor-Prinzip und Analyse von Anwendungsbeispielen

Ein genauerer Blick auf die Unterschiede zwischen Link und @import

So deaktivieren Sie Anzeigen in der Terminal-Willkommensnachricht in Ubuntu Server

So fragen Sie Bilder in einem privaten Register ab oder erhalten sie

Lösung für den Konfigurationsfehler des Nginx-SSL-Zertifikats

Befehle zum Deaktivieren und Aktivieren von MySQL-Fremdschlüsseleinschränkungen

Detaillierte Analyse des virtuellen Nginx-Hosts

Detaillierte Erläuterung der persistenten MySQL-Statistiken

Detaillierte Schritte zur Installation von MinIO auf Docker