Drei Möglichkeiten, in CSS3 eine Hintergrundunschärfe zu erzielen (Zusammenfassung)
|
1. Normale Hintergrundunschärfe Code:
<Stil>
html,
Körper {
Breite: 100 %;
Höhe: 100%;
}
* {
Rand: 0;
Polsterung: 0;
}
/*Unscharfer Hintergrund*/
.bg {
Breite: 100 %;
Höhe: 100%;
Position: relativ;
Hintergrund: URL("./bg.jpg"), keine Wiederholung behoben;
Hintergrundgröße: Abdeckung;
Box-Größe: Rahmenbox;
Filter: Unschärfe (2px);
Z-Index: 1;
}
.Inhalt {
Position: absolut;
links: 50%;
oben: 50 %;
transformieren: übersetzen(-50 %, -50 %);
Breite: 200px;
Höhe: 200px;
Textausrichtung: zentriert;
Z-Index: 2;
}
</Stil>
</Kopf>
<Text>
<div Klasse="bg">
<div class="content">Unscharfer Hintergrund</div>
</div>
</body>Die Wirkung ist wie folgt:
Wenn Sie so schreiben, werden die Nachkommen des gesamten Divs unscharf und es erscheinen weiße Ränder, was die Seite sehr unansehnlich macht. Um dieses Problem zu lösen, können wir Pseudoelemente verwenden, da die Unschärfe von Pseudoelementen nicht von den Nachkommen des übergeordneten Elements übernommen wird. Code:
<Stil>
html,
Körper {
Breite: 100 %;
Höhe: 100%;
}
* {
Rand: 0;
Polsterung: 0;
}
/*Unscharfer Hintergrund*/
.bg {
Breite: 100 %;
Höhe: 100%;
Position: relativ;
Hintergrund: URL("./bg.jpg"), keine Wiederholung behoben;
Hintergrundgröße: Abdeckung;
Box-Größe: Rahmenbox;
Z-Index: 1;
}
.bg:nach {
Inhalt: "";
Breite: 100 %;
Höhe: 100%;
Position: absolut;
links: 0;
oben: 0;
/* Die Einstellungen der Hintergrundeigenschaften vom übergeordneten Element übernehmen */
Hintergrund: erben;
Filter: Unschärfe (2px);
Z-Index: 2;
}
.Inhalt {
Position: absolut;
links: 50%;
oben: 50 %;
transformieren: übersetzen(-50 %, -50 %);
Breite: 200px;
Höhe: 200px;
Textausrichtung: zentriert;
Z-Index: 3;
}
</Stil>
</Kopf>
<Text>
<div Klasse="bg">
<div class="content">Unscharfer Hintergrund</div>
</div>
</body>Die Wirkung ist wie folgt:
2. Teilweise Hintergrundunschärfe Wenn Sie den vorherigen Effekt beherrschen, ist der lokale Unschärfeeffekt relativ einfach. Code:
<Stil>
html,
Körper {
Breite: 100 %;
Höhe: 100%;
}
* {
Rand: 0;
Polsterung: 0;
}
/*Unscharfer Hintergrund*/
.bg {
Breite: 100 %;
Höhe: 100%;
Position: relativ;
Hintergrund: URL("./bg.jpg"), keine Wiederholung behoben;
Hintergrundgröße: Abdeckung;
Box-Größe: Rahmenbox;
Z-Index: 1;
}
.Inhalt {
Position: absolut;
links: 50%;
oben: 50 %;
transformieren: übersetzen(-50 %, -50 %);
Breite: 200px;
Höhe: 200px;
Hintergrund: erben;
Z-Index: 2;
}
.Inhalt:nach {
Inhalt: "";
Breite: 100 %;
Höhe: 100%;
Position: absolut;
links: 0;
oben: 0;
Hintergrund: erben;
Filter: Unschärfe (15px);
/*Um die Unschärfe deutlicher zu machen, erhöhen Sie den Unschärfegrad*/
Z-Index: 3;
}
.inhalt>div {
Breite: 100 %;
Höhe: 100%;
Textausrichtung: zentriert;
Zeilenhöhe: 200px;
Position: absolut;
links: 0;
oben: 0;
Z-Index: 4;
}
</Stil>
</Kopf>
<Text>
<div Klasse="bg">
<div Klasse="Inhalt">
<div>Partielle Hintergrundunschärfe</div>
</div>
</div>
</body>Der Effekt ist in der folgenden Abbildung dargestellt:
3. Teilweise Hintergrundklarheit Code:
<Stil>
html,
Körper {
Breite: 100 %;
Höhe: 100%;
}
* {
Rand: 0;
Polsterung: 0;
}
/*Unscharfer Hintergrund*/
.bg {
Breite: 100 %;
Höhe: 100%;
Position: relativ;
Hintergrund: URL("./bg.jpg"), keine Wiederholung behoben;
Hintergrundgröße: Abdeckung;
Box-Größe: Rahmenbox;
Z-Index: 1;
}
.bg:nach {
Inhalt: "";
Breite: 100 %;
Höhe: 100%;
Position: absolut;
links: 0;
oben: 0;
Hintergrund: erben;
Filter: Unschärfe (5px);
Z-Index: 2;
}
.Inhalt {
Position: absolut;
links: 50%;
oben: 50 %;
transformieren: übersetzen(-50 %, -50 %);
Breite: 200px;
Zeilenhöhe: 200px;
Textausrichtung: zentriert;
Hintergrund: erben;
Z-Index: 3;
Kastenschatten: 0 0 10px 6px rgba(0, 0, 0, .5);
}
</Stil>
</Kopf>
<Text>
<div Klasse="bg">
<div Klasse="Inhalt">
<div>Teilweiser Hintergrund ist klar</div>
</div>
</div>
</body>Der Effekt ist in der folgenden Abbildung dargestellt:
Damit ist dieser Artikel über drei Möglichkeiten zur Hintergrundunschärfe mit CSS3 abgeschlossen. Weitere relevante Inhalte zur Hintergrundunschärfe mit CSS3 finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
>>: Detaillierte Erklärung der Überwachungseigenschaften von Vue
Artikel empfehlen
Detailliertes Beispiel für Zeilensperren in MySQL
Vorwort Sperren sind Synchronisierungsmechanismen...
Beispiel zum Erstellen eines öffentlichen Harbor-Repository mit Docker
Im vorherigen Blogbeitrag ging es um das private ...
Detailliertes Installationstutorial für Zabbix 4.04 (basierend auf CentOS 7.6)
1. Vorbereitung vor der Installation: 1.1 JDK ins...
Der Prozess des SSH-Dienstes basierend auf der Schlüsselauthentifizierung im Linux-System
Wie wir alle wissen, ist SSH derzeit das zuverläs...
So testen Sie die maximale Anzahl von TCP-Verbindungen in Linux
Vorwort Es besteht ein Missverständnis bezüglich ...
Gegenseitiger Wertetransfer und Aufruf von Vue-Eltern-Kind-Komponenten
Inhaltsverzeichnis 1. Übergeordnetes Element über...
Eine kurze Erläuterung zur Lösung des Depends_on-Reihenfolgeproblems in Docker-Compose
Die Verwendung von depends_on zum Sortieren von C...
Tutorial zur Installation des MySQL 5.7.18-Binärpakets unter Linux (ohne Standardkonfigurationsdatei my_default.cnf)
Ich lerne gerade MySQL. Ich bin ein kompletter Ne...
Detaillierte Erläuterung des Implementierungsprinzips von ACID-Transaktionen in MySQL
Einführung Beginnen wir wie immer mit einer Szene...
Mybatis implementiert Details zum Abfangen und Ändern von SQL-Abfragen
Vorwort Eine der Funktionen eines Interceptors be...
Spezifische Schritte zur Verwendung des Vant-Frameworks im WeChat-Applet
Inhaltsverzeichnis 1. Öffnen Sie das Projektverze...
Implementierung des Einfügens von Millionen von Datensätzen in eine MySQL-Datenbank innerhalb von 10 Sekunden
Lassen Sie uns zunächst über eine Frage nachdenke...
Detaillierte Erläuterung der vier Transaktionsisolationsebenen in MySQL
Die Testumgebung dieses Experiments: Windows 10+c...
Detaillierte Schritte zur Entwicklung einer Java-Zahlungsschnittstelle für Alipay
Inhaltsverzeichnis erster Schritt Schritt 2 Schri...
Die Fallstricke bei der Bereitstellung von Angular-Projekten in Nginx
Wenn man online nach Methoden sucht, um Angular -...