Wie halte ich die Kanten scharf, wenn ich ein Bild mit dem CSS3-Filter unscharf mache?

Mit dem CSS3-Filter Blur definierte Kanten beibehalten

Beim Anwenden der filter: Blur()-Eigenschaft auf ein Bild mit CSS3 werden die Kanten des Das Bild kann auch unscharf werden. Dies ist möglicherweise nicht wünschenswert, wenn Sie scharfe Kanten beibehalten und gleichzeitig den Rest des Bildes verwischen möchten.

Lösung: Negative Ränder mit verstecktem Überlauf

Um gleichzeitig scharfe Kanten zu erzielen Wenn Sie ein Bild verwischen möchten, können Sie es in ein

einschließen. und wenden Sie negative Ränder auf das an. Element. Bei dieser Technik wird overflow:hidden; auf dem

, wodurch das unscharfe Bild innerhalb seiner Grenzen bleibt:

img {
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  margin: -5px -10px -10px -5px;
}

div {
  overflow: hidden;
}

Dieser Ansatz erzeugt eine Ausgabe, bei der die Bildränder scharf bleiben, während der Rest des Bildes unscharf ist . Die negativen Ränder im Das Element fungiert als „Pufferzone“ um das Bild und stellt sicher, dass der Unschärfeeffekt nicht über diese Grenzen hinausgeht.

Demo:

[Bild eines Kätzchens mit Scharfe Kanten und unscharfer Hintergrund]

HTML:

<div>
  <img  src="/static/imghwm/default1.png" data-src="http://placekitten.com/300" class="lazy" alt="Wie halte ich die Kanten scharf, wenn ich ein Bild mit dem CSS3-Filter unscharf mache?" >
</div>

Das obige ist der detaillierte Inhalt vonWie halte ich die Kanten scharf, wenn ich ein Bild mit dem CSS3-Filter unscharf mache?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!