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:4621451Durchsuche

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:

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

In Verbindung stehende Artikel

Mehr sehen