Wie halte ich die Kanten scharf, wenn ich ein Bild mit dem CSS3-Filter unscharf mache?-CSS-Tutorial-php.cn

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

DDD

Freigeben： 2024-11-29 15:24:13

Original

630 Leute haben es durchsucht

How to Keep Edges Sharp When Blurring an Image with CSS3 Filter?

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;
}

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!

Quelle：php.cn

Vorheriger Artikel：Warum überschreibt „.foo a:link“ „a:hover“ in der CSS-Spezifität? Nächster Artikel：Wie kann verhindert werden, dass sich Flexbox-Elemente ausdehnen, um den verfügbaren Platz auszufüllen?

Erklärung dieser Website

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

Neueste Artikel des Autors