Heim > Artikel > Web-Frontend > Wie kann man das Hintergrundbild mit CSS verwischen? Einführung in die Methode zum Verwischen von Hintergrundbildern in CSS
Wie kann man das Hintergrundbild mit CSS verwischen? Einführung in die Methode zum Verwischen von Hintergrundbildern in CSS
- 不言Original
- 2018-10-26 14:27:4621468Durchsuche
Ich glaube, viele Freunde werden darüber nachdenken, PS zu verwenden, um diesen Effekt zu erzielen, wenn sie das Hintergrundbild unscharf sehen. Kann der Effekt der Hintergrundbildunschärfe also mit CSS erzielt werden? Im folgenden Artikel erfahren Sie, wie Sie die Unschärfe des Hintergrundbilds in CSS festlegen.
Das Filterattribut wird beim Unschärfen des Hintergrunds verwendet. Wir verwenden die Unschärfe im Filterattribut, um den unscharfen Hintergrund festzulegen.
Der Code lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<style>
img {
filter: blur(5px);
}
</style>
</head>
<body>
<img src="image/girl.jpg" alt="girl" width="300" style="max-width:90%">
</body>
</html>Der Effekt der CSS-Hintergrundunschärfe ist wie folgt:
Die obige Methode ist einfach. Schauen wir uns eine etwas kompliziertere Methode an.
Der Code lautet wie folgt:
rrreeDer Hintergrundunschärfeeffekt ist wie folgt:
Erklärung: Der obige Code dient hauptsächlich dazu, die Hintergrundfarbe oder das Bild durch Pseudoelemente dort festzulegen, wo der unscharfe Hintergrund sein soll eingestellt werden und die regionale relative Positionierung und die absolute Positionierung des Pseudoelements verwenden, um die Größe des Pseudoelements genau der Größe des Originalbereichs anzupassen. Verwenden Sie dann den Unschärfefilter, um ihn zu verwischen. Der Effekt ist wie oben.
Dieser Artikel endet hier. Weitere spannende Inhalte finden Sie in den entsprechenden Tutorial-Kolumnen auf der chinesischen PHP-Website! ! !
Das obige ist der detaillierte Inhalt vonWie kann man das Hintergrundbild mit CSS verwischen? Einführung in die Methode zum Verwischen von Hintergrundbildern in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!