Wie kann ich in CSS3 einen definierten Unschärfeeffekt erzielen und gleichzeitig scharfe Kanten erhalten?-CSS-Tutorial-php.cn

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

Nach dem Login kopieren

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!

Quelle：php.cn

Vorheriger Artikel：Wie kann ich das Farbeingabefeld in Webkit-Browsern anpassen? Nächster Artikel：Wie verhindern Dateiverknüpfungsparameter das Caching?

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

2207

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

2360

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

1974

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