Ich habe heute eine Anfrage erhalten, den Gaußschen Unschärfeeffekt zum Verwischen einer Seite zu verwenden. Ich habe gerade diese Gelegenheit genutzt, um die beiden APIs der Gaußschen Unschärfe in CSS3 zu klären.
veranschaulichen:
Diese API ist ein Filter, der nicht nur Gaußsche Unschärfe erreichen kann, sondern auch viele andere Dinge wie Farbversatz, Sättigung, Graustufen usw.
Grammatik:
// Leerzeichen verwenden, um mehrere Filter zu trennen filter: none; //Gaußscher Unschärfefilter: Unschärfe(4px); //Linearer Helligkeitsfilter: Helligkeit(); // Kontrastfilter: context(); // Schatteneffektfilter: drop-shadow(); //Graustufenfilter: greyscale(); // Farbtonrotationsfilter: hue-rotate(); //Bildfilter umkehren: invert(); //Transparenzfilter konvertieren: opacity(); // Sättigungsfilter: saturate(); // Braunfilter: sepia(); // SVG-Filter filter: url();
Darunter Gaußscher filter: blur();
veranschaulichen:
Wenn Sie ein Element erstellen und dieses Attribut hinzufügen, werden dem Bereich hinter dem Element Effekte (z. B. Unschärfe oder Farbverschiebung) hinzugefügt.
Kontrast:
Das Filterattribut muss auf das Bild oder Hintergrundbild geladen werden, während der Hintergrundfilter nur ein Element sein muss.
Grammatik:
Hintergrundfilter: Unschärfe (2px); Hintergrundfilter: Helligkeit (60 %); Hintergrundfilter: Kontrast (40 %); Hintergrundfilter: Schlagschatten (4px 4px 10px blau); Hintergrundfilter: Graustufen (30 %); Hintergrundfilter: Farbton drehen (120 Grad); Hintergrundfilter: invertieren (70 %); Hintergrundfilter: Deckkraft (20 %); Hintergrundfilter: Sepia (90 %); Hintergrundfilter: gesättigt (80 %);
<!DOCTYPE html>
<html lang="de">
<Kopf>
<Stil>
.wrapBox2 {
Breite: 800px;
Höhe: 300px;
Überlauf: versteckt;
Position: relativ;
Hintergrundbild: url("./win.jpeg");
Hintergrundgröße: 100 % 100 %;
Hintergrundwiederholung: keine Wiederholung;
Filter: Unschärfe (10 Pixel);
}
.subBox {
Position: absolut;
Breite: calc(100% - 100px);
Höhe: calc(100% - 100px);
Z-Index: 2;
}
.text {
Position: relativ;
/* Z-Index: 10; */
Schriftgröße: 40px;
Schriftstärke: fett;
Farbe: #f00;
}
</style>
</head>
<Körper>
<div class="wrapBox2">
<div class="subBox"></div>
<div class="text">Alles verwischen</div>
</div>
</body>
</html> 
Hierbei ist zu beachten, dass die tatsächliche Größe nach dem Hinzufügen von Unschärfe aufgrund des umgebenden Grateffekts die von uns festgelegte Breite und Höhe überschreitet. Sie können eine Ebene nach außen wickeln und overflow: hidden;
<!DOCTYPE html>
<html lang="de">
<Kopf>
<Stil>
.wrapBox2 {
Breite: 800px;
Höhe: 300px;
/* Überlauf: versteckt */
Position: relativ;
}
.subBox {
Breite: 100 %;
Höhe: 100 %;
Position: absolut;
Breite: calc(100% - 100px);
Höhe: calc(100% - 100px);
Z-Index: 2;
Filter: Unschärfe (10 Pixel);
}
.text {
Position: relativ;
/* Z-Index: 10; */
Schriftgröße: 40px;
Schriftstärke: fett;
Farbe: #f00;
}
</style>
</head>
<Körper>
<div class="wrapBox2">
<img src="./win.jpeg" class="subBox" />
<div class="text">Alles verwischen</div>
</div>
</body>
</html> 
Da sich Text und Bild auf derselben Ebene befinden, befindet sich der Text auf diese Weise entweder unter dem Bild oder über dem Bild (gesteuert gemäß Z-Index), ohne dass der Text unscharf wird.
<!DOCTYPE html>
<html lang="de">
<Kopf>
<Stil>
.wrapBox2 {
Breite: 800px;
Höhe: 300px;
Überlauf: versteckt;
Position: relativ;
Hintergrundbild: url("./win.jpeg");
Hintergrundgröße: 100 % 100 %;
Hintergrundwiederholung: keine Wiederholung;
}
.subBox {
Position: absolut;
Breite: calc(100% - 100px);
Höhe: calc(100% - 100px);
Z-Index: 2;
Hintergrundfilter: Unschärfe (10 Pixel);
/* oben: 100px */
}
.text {
Position: relativ;
/* Z-Index: 10; */
Schriftgröße: 40px;
Schriftstärke: fett;
Farbe: #f00;
}
</style>
</head>
<Körper>
<div class="wrapBox2">
<div class="subBox"></div>
<div class="text">Teilweise unscharf</div>
</div>
</body>
</html> 
Wie Sie sehen, muss das Attribut „Hintergrundfilter“ nicht für ein Bildelement festgelegt werden, aber für jedes Element ist diese Methode meiner Meinung nach flexibler.
Natürlich kann die Verwendung eines Hintergrundfilters auch das erste Szenario erfüllen.
Damit ist dieser Artikel über die Verwendung von CSS-Filtern und Hintergrundfiltern zur Erzielung eines Gaußschen Unschärfeeffekts abgeschlossen (Beispielcode). Weitere verwandte CSS-Gaußsche Unschärfeinhalte finden Sie hoffentlich in früheren Artikeln auf downcodes.com wird downcodes.com in Zukunft stärker unterstützen!