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
So zeigen Sie den Typ des gemounteten Dateisystems in Linux an
Vorwort Wie Sie wissen, unterstützt Linux viele D...
Zusammenfassung der allgemeinen Docker-Befehle und Tipps
Installationsskript Ubuntu / CentOS Es scheint ei...
Manuelles Implementieren des Eingabefelds für den js-SMS-Bestätigungscode
Vorwort Dieser Artikel beschreibt eine allgemeine...
So überwachen und löschen Sie abgelaufene Sitzungen in Tomcat
Vorwort Ich habe zufällig entdeckt, dass die halb...
So führen Sie das Springboot-Projekt im Docker aus
1. Klicken Sie unten in IDEA auf Terminal und geb...
Zusammenfassung mehrerer Implementierungen der Rückkehr zum Anfang in HTML-Seiten
Vor kurzem musste ich beim Entwickeln einer Websi...
Einige CSS-Fragen, die Ihnen während eines Vorstellungsgesprächs gestellt werden könnten
Dieser Artikel dient lediglich der Erinnerung an ...
Lösung für das Problem mit verstümmelten chinesischen Schriftzeichen in MySQL unter Ubuntu
Finden Sie das Problem Ich habe vor Kurzem Django...
Fügen Sie Ihrer Website mit Google Web Fonts unbegrenzt viele Schriftarten hinzu
Lange Zeit wurde die Entwicklung von Websites dad...
Verwenden von vue3, um den Nebennachrichten-Eingabeaufforderungseffekt des Apple-Systems zu imitieren
Inhaltsverzeichnis Animationsvorschau Andere UI-B...
mysql ersetzt einen Teil des Feldinhalts und mysql ersetzt die Funktion replace()
[mysql] Ersetzungsverwendung (Teil des Inhalts ei...
Detaillierte Erläuterung der passwortfreien SSH-Anmeldekonfiguration unter Linux
Angenommen, es gibt zwei Linux-Server A und B, un...
So verwalten Sie MySQL-Indizes und Datentabellen
Inhaltsverzeichnis Tabellenkonflikte finden und b...
Implementierungsfallcodeanalyse für dynamische und statische Trennung von Nginx
Trennung von statischer und dynamischer Dynamisch...
Verwendung von TypeScript-Generics
Inhaltsverzeichnis 1. Einfach zu bedienen 2. Verw...