suchen

Heim >Web-Frontend >CSS-Tutorial >Wie kann man mit CSS3-Filtern ein Bild verwischen, ohne die Kanten zu verwischen?

Wie kann man mit CSS3-Filtern ein Bild verwischen, ohne die Kanten zu verwischen?

Susan Sarandon
Susan SarandonOriginal
2024-11-21 16:58:09431Durchsuche

How to Blur an Image Without Smudging Edges Using CSS3 Filters?

CSS3-Filter: So verwischen Sie Bilder, ohne die Kanten zu verwischen

Wenn Sie CSS3-Filter zum Verwischen von Bildern verwenden, können auch die Bildränder unscharf werden. Dies kann unerwünscht sein, wenn Sie scharfe Kanten beibehalten und gleichzeitig einen Unschärfeeffekt erzeugen möchten.

Um dieses Problem zu beheben, besteht eine clevere Lösung darin, das Bild innerhalb eines

Element und Anpassen seiner Ränder. Durch Festlegen der Überlaufeigenschaft des
Um es auszublenden, können Sie das Bild auf die gewünschten Abmessungen zuschneiden.

CSS-Code:

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

Erklärung:

  • Die Eigenschaft „margin“ legt die Ränder um das Bild fest, wodurch die unscharfen Kanten um den gleichen Wert ausgeglichen werden Menge.
  • Die overflow:hidden-Eigenschaft verhindert, dass das Bild über die Grenzen von
    hinausläuft, wodurch ein Effekt ähnlich einer eingefügten Unschärfe entsteht.

Beispiel :

[Live Demo](https://jsfiddle.net/NI3c4/)

HTML:

<div>
  <img src="path/to/image.jpg" />
</div>

Ergebnis:

Das Bild ist mit definierten Kanten unscharf, da der unscharfe Bereich innerhalb des

enthalten ist. Element.

Das obige ist der detaillierte Inhalt vonWie kann man mit CSS3-Filtern ein Bild verwischen, ohne die Kanten zu verwischen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css css3 html if while Filter using Property this overflow margin https issue
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
Vorheriger Artikel：Wie kann man dafür sorgen, dass sich Eingabefelder über die gesamte Breite ihres Containers erstrecken?Nächster Artikel：Wie kann man dafür sorgen, dass sich Eingabefelder über die gesamte Breite ihres Containers erstrecken?

In Verbindung stehende Artikel

Mehr sehen