suchen

Heim >Web-Frontend >CSS-Tutorial >Wie kann ich in CSS3 einen definierten Unschärfeeffekt erzielen und gleichzeitig scharfe Kanten erhalten?

Wie kann ich in CSS3 einen definierten Unschärfeeffekt erzielen und gleichzeitig scharfe Kanten erhalten?

Barbara Streisand
Barbara StreisandOriginal
2024-11-16 14:10:03305Durchsuche

How Can I Achieve a Defined Blur Effect in CSS3 While Preserving Sharp Edges?

Erzielen definierter Kanten mit CSS3-Filter-Unschärfe

Beim Anwenden eines Unschärfeeffekts auf ein Bild mithilfe der CSS-Filtereigenschaft tritt ein häufiges Problem auf: Auch die Bildränder werden unscharf. Dies kann zu einem unerwünschten Ergebnis führen, insbesondere wenn scharfe Linien oder Details erhalten bleiben müssen.

Um dieses Problem zu lösen und definierte Kanten beizubehalten, kann eine clevere Technik eingesetzt werden. Durch Platzieren des unscharfen Bildes innerhalb eines

Element und die Anwendung bestimmter CSS-Stile ist es möglich, einen „eingefügten Unschärfe“-Effekt zu erzeugen.

Der folgende Codeausschnitt zeigt, wie dieser Effekt erzielt wird:

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

In diesem Code wird das < ;img> Das Element ist in einem

enthalten. wobei der Überlauf auf ausgeblendet eingestellt ist. Dadurch wird sichergestellt, dass das unscharfe Bild an den Rändern des
beschnitten wird, wodurch ein Übergreifen des Unschärfeeffekts auf die Umgebung verhindert wird.

Darüber hinaus werden negative Ränder auf das angewendet. Element, um es innerhalb des

leicht zu verschieben. Die Werte dieser Ränder können angepasst werden, um das gewünschte Maß an Unschärfe zu erzeugen und gleichzeitig die Kanten beizubehalten.

Diese Technik erzeugt effektiv einen definierten Unschärfeeffekt, der die Kanten des Bildes scharf hält und gleichzeitig die Details im Inneren weicher macht.

Das obige ist der detaillierte Inhalt vonWie kann ich in CSS3 einen definierten Unschärfeeffekt erzielen und gleichzeitig scharfe Kanten erhalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css css3 while Filter using Property this overflow 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 ich das Farbeingabefeld in Webkit-Browsern anpassen?Nächster Artikel：Wie kann ich das Farbeingabefeld in Webkit-Browsern anpassen?

In Verbindung stehende Artikel

Mehr sehen