Verwenden Sie CSS Filter: Blur, um den Unschärfeeffekt von Bildern zu erzielen (Codebeispiel).

Der Inhalt dieses Artikels befasst sich mit der Verwendung von CSS-Filtern, um den Unschärfeeffekt von Bildern zu erzielen. Schauen wir uns ohne weiteres den Haupttext an.

Ich bin kürzlich auf ein Problem mit filter:blur in CSS gestoßen. Schauen wir uns zunächst ein Bild auf der Seite an, wie unten gezeigt:

HTML:

<div class="imageContainer">
<img  src="/static/imghw/default1.png"  data-src="image/1.jpg"  class="lazy"   alt="Verwenden Sie CSS Filter: Blur, um den Unschärfeeffekt von Bildern zu erzielen (Codebeispiel)." >
</div>

CSS:

.imageContainer {
    border: solid 5px black;
    width: 1024px;
    height: 768px;
    }

Jetzt wenden wir einen schönen Unschärfeeffekt an:

img {
-webkit-filter: blur(30px);
}

Der Effekt wird sein:

Es wurde festgestellt, dass das Bild über die Grenzen seines Containers hinaus unscharf wird und zwischen dem unscharfen Bild und dem schwarzen Rand ein „Leuchteffekt“ auftritt. Lassen Sie uns dies nun beheben.

Lösung:

.imageContainer {
overflow: hidden;
}    
img {
+transform:scale(1.1);
}

Der Effekt ist wie folgt:

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS Filter: Blur, um den Unschärfeeffekt von Bildern zu erzielen (Codebeispiel).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!