Wie kann man mit CSS3-Filtern ein Bild verwischen, ohne die Kanten zu verwischen?-CSS-Tutorial-php.cn

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

Susan Sarandon

Freigeben： 2024-11-21 16:58:09

Original

354 Leute haben es durchsucht

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!

Quelle：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 ich ein Font Awesome-Symbol in ein Texteingabefeld integrieren?

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

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

1938

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

2106

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

1777

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...