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
Schritte zum Anpassen der Knoteninstallation, um den Standardinstallationspfad globaler NPM-Module zu ändern
Ich habe Node auf dem Laufwerk D installiert und ...
Detaillierte Erläuterung des mobilen Projekts vite2.0 + vue3
1. Technische Punkte Vite-Version vue3 ts Integri...
vue-pdf realisiert Online-Dateivorschau
In diesem Artikelbeispiel wird der spezifische Co...
Kurze Analyse des MySQL B-Tree-Index
B-Baum-Index Verschiedene Speicher-Engines können...
Vue + node realisiert Audioaufzeichnungs- und -wiedergabefunktion
Ergebnis: Der Hauptteil besteht darin, die Codelo...
Lösungsideen und Implementierungsschritte für das Problem, dass CSS und JS nach einem Struts2-Sprung ungültig werden
Wenn die JSP angezeigt wird, zu der nach der Ausfü...
Das WeChat-Applet realisiert die Funktion zum Hochladen von Bildern
In diesem Artikelbeispiel wird der spezifische Co...
Apropos „Weniger und mehr“ im Webdesign (Bild)
„Weniger ist mehr“ ist ein Schlagwort vieler Desi...
Beispiel für eine einfache Operation einer MySQL-Abfrageanweisung
Dieser Artikel veranschaulicht anhand von Beispie...
So simulieren Sie eine Aufzählung mit JS
Vorwort Im aktuellen JavaScript gibt es kein Konz...
Farbverlaufseffekt im HTML-Hintergrund durch CSS-Stil erreicht
Screenshots der Effekte: Implementierungscode: Cod...
Schreibreihenfolge und Namenskonventionen sowie Vorsichtsmaßnahmen im CSS-Stil
Die Bedeutung der Schreibreihenfolge Reduzieren S...
So konfigurieren Sie den Nginx-Lastausgleich
Inhaltsverzeichnis Nginx-Lastausgleichskonfigurat...
Sprechen Sie über wichtige Unterverzeichnisprobleme im Linux-System
/etc/fstab Partitionen/Festplatten automatisch mo...
So implementieren Sie Docker Registry zum Erstellen eines privaten Image Warehouse
Das Image des Microservice wird zur Speicherung i...