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

Eclipse konfiguriert Tomcat und Tomcat hat eine ungültige Port-Lösung

Eine kurze Analyse der Verwendung von JDBC zum Betreiben von MySQL erfordert das Hinzufügen von Class.forName("com.mysql.jdbc.Driver")

Artikel

So legen Sie mit CSS eine Hintergrundunschärfe fest

Eclipse konfiguriert Tomcat und Tomcat hat eine ungültige Port-Lösung

Eine kurze Analyse des Zugriffs auf Windows 10-Hostordner von virtuellen CentOS 8-Maschinen aus

Vue-Routing zum Implementieren der Login-Abfangung

Zusammenfassung der 3 kleineren Fehler, die während der Installation von MySQL 8.0 aufgetreten sind

MySQL ruft die aktuelle Datums- und Uhrzeitfunktion ab

Ein kurzes Verständnis des Unterschieds zwischen MySQL Union All und Union

Eine Sammlung möglicher Probleme bei der Migration von SQLite3 nach MySQL

So optimieren Sie die MySQL-Indexfunktion basierend auf dem Schlüsselwort „Explain“

Vue verbessert die Seitenantwortgeschwindigkeit durch Lazy Loading

Eine kurze Analyse der Verwendung von JDBC zum Betreiben von MySQL erfordert das Hinzufügen von Class.forName("com.mysql.jdbc.Driver")

Artikel empfehlen

Implementieren eines binären Suchbaums in JavaScript

Schritte zum Importieren von Millionen von Daten in MySQL mit .Net Core

Vue + Express + Socket realisiert Chat-Funktion

Die neue Version der Chrome-Browsereinstellungen ermöglicht die domänenübergreifende Implementierung

Implementierung der One-Click-Verpackung und -Veröffentlichung von Vue-Projekten mit Jenkins

Natives js zur Realisierung der Bild-Upload-Steuerung

Verwenden von JavaScript zum Implementieren von Karusselleffekten

JavaScript+HTML zur Implementierung eines Studenteninformationsmanagementsystems

Rückblick auf die besten Webdesign-Arbeiten 2012 [Teil 1]

Eine kurze Analyse der CSS-Selektorgruppierung

Vue implementiert ein einfaches Einkaufswagenbeispiel

Führen Sie die Schritte zum Konfigurieren der IP-Adresse in Ubuntu 18.04 LTS aus

Docker exec führt mehrere Befehle aus

7 Interviewfragen zu JS, wie viele können Sie richtig beantworten

Entwicklung einer Vue Element-Frontend-Anwendung zum Abrufen von Backend-Daten