Können Sie ein Bild unscharf machen und gleichzeitig die Kanten scharf halten?

Definierte Kanten mit CSS3-Filter zum Weichzeichnen des Hintergrunds

Unscharfe Bilder verleihen Bildern einen Hauch von Weichheit und Tiefe, beeinträchtigen jedoch häufig die Schärfe der Kanten. Können wir einen unscharfen Effekt erzielen und gleichzeitig scharfe Konturen beibehalten?

Lösung: Div mit Überlauf und Negativ Ränder

CSS:

div {
  overflow: hidden;
}

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

HTML:

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

Diese Lösung platziert das unscharfe Bild innerhalb eines Div mit verstecktem Überlauf. Indem wir negative Ränder für das Bild festlegen, versetzen wir es innerhalb des Div, wodurch die ursprünglichen, unverwischten Kanten sichtbar werden.

Demo:

[Bild eines unscharfen Bildes mit definierten Kanten ]

Wie es funktioniert:

• Die div verhindert, dass das unscharfe Bild über seine Grenzen hinausläuft.
• Die negativen Ränder schieben das Bild leicht nach innen und legen den unscharfen Außenrand frei.
• Der Unschärfefilter wird auf das Bild angewendet und verleiht ihm beim Verlassen Tiefe die Kanten intakt.

Diese Technik simuliert effektiv einen „eingefügten Unschärfe“-Effekt und liefert die gewünschte Kombination aus Unschärfe und Schärfe.

Das obige ist der detaillierte Inhalt vonKönnen Sie ein Bild unscharf machen und gleichzeitig die Kanten scharf halten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!