Heim >Web-Frontend >CSS-Tutorial >Wie halte ich die Kanten scharf, wenn ich ein Bild mit dem CSS3-Filter unscharf mache?
Wie halte ich die Kanten scharf, wenn ich ein Bild mit dem CSS3-Filter unscharf mache?
- DDDOriginal
- 2024-11-29 15:24:13641Durchsuche
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
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="http://placekitten.com/300" /> </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!