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
Eine kurze Diskussion über die Eigenschaften von CSS-Float
In diesem Artikel werden die Eigenschaften von CS...
So verwenden Sie mysqldump zum Sichern von MySQL-Daten
1. Einführung in mysqldump mysqldump ist ein logi...
Ein kurzer Vortrag über JavaScript Sandbox
Vorwort: Apropos Sandboxen: Wir denken vielleicht...
Detaillierte Erläuterung der Leistungsoptimierung des Web-Frontends: Zusammenführung und Komprimierung von Ressourcen
Ressourcenzusammenführung und -komprimierung für ...
Das Submit-Ereignis des Formulars reagiert nicht
1. Problembeschreibung <br />Wenn JS verwen...
Spezifische Verwendung des Node.js-Paketmanagers npm
Inhaltsverzeichnis Zweck npm init und package.jso...
Lassen Sie uns ausführlich über das Prinzip und die Implementierung von new in JS sprechen
Inhaltsverzeichnis Definition Konstruktorkörper s...
Vor- und Nachteile gängiger MySQL-Speicher-Engines
Inhaltsverzeichnis Alle Speicher-Engines anzeigen...
JavaScript zur Implementierung des Countdowns für den SMS-Versand
In diesem Artikel wird der spezifische JavaScript...
Implementierung der Leistungsoptimierung des Element-Shuttle-Frames
Inhaltsverzeichnis Hintergrund Lösung Neue Fragen...
So verwenden Sie eine Karte, um die domänenübergreifende Nutzung mehrerer Domänennamen in Nginx zu ermöglichen
Die übliche Nginx-Konfiguration ermöglicht domäne...
Installations-Tutorial für mysql8.0rpm auf centos7
Laden Sie zunächst das Diagramm herunter 1. Deins...
Eine kurze Erläuterung der Syntax der VUE-Uni-App-Vorlage
1.v-bind (Abkürzung:) Um in Daten definierte Date...
Eine kurze Diskussion zur Auftragsrekonstruktion: MySQL-Sharding
Inhaltsverzeichnis 1. Ziele 2. Umweltvorbereitung...
Preistabelle mit CSS3 implementiert
Ergebnis: Implementierungscode html <div id=&q...