Wie kann man das Hintergrundbild mit CSS verwischen? Einführung in die Methode zum Verwischen von Hintergrundbildern in CSS-CSS-Tutorial-php.cn

Wie kann man das Hintergrundbild mit CSS verwischen? Einführung in die Methode zum Verwischen von Hintergrundbildern in CSS

不言

Freigeben： 2018-10-26 14:27:46

Original

21453 Leute haben es durchsucht

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>

Nach dem Login kopieren

Der Effekt der CSS-Hintergrundunschärfe ist wie folgt:

Wie kann man das Hintergrundbild mit CSS verwischen? Einführung in die Methode zum Verwischen von Hintergrundbildern in CSS

Die obige Methode ist einfach. Schauen wir uns eine etwas kompliziertere Methode an.

Der Code lautet wie folgt:

rrree

Der Hintergrundunschärfeeffekt ist wie folgt:

Wie kann man das Hintergrundbild mit CSS verwischen? Einführung in die Methode zum Verwischen von Hintergrundbildern in CSS

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!