suchen

Heim  >  Artikel  >  Web-Frontend  >  So fügen Sie einem Bild mithilfe von CSS einen Unschärfeebeneneffekt hinzu

So fügen Sie einem Bild mithilfe von CSS einen Unschärfeebeneneffekt hinzu

WBOY
WBOYOriginal
2021-12-10 11:35:145735Durchsuche

In CSS können Sie das Filterattribut verwenden, um einem Bild einen Unschärfeebeneneffekt hinzuzufügen. Die Funktion dieses Attributs besteht darin, den visuellen Effekt des Elements festzulegen, wenn dieses Attribut zusammen mit der Funktion „blur()“ verwendet wird können Sie dem Bild einen Unschärfeeffekt hinzufügen. Die Syntax lautet „Bildelement {filter:unschärfewert px);}“.

So fügen Sie einem Bild mithilfe von CSS einen Unschärfeebeneneffekt hinzu

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.

So fügen Sie einem Bild mit CSS einen Unschärfeebeneneffekt hinzu

Wenn Sie in CSS einem Bild einen Unschärfeebeneneffekt hinzufügen möchten, müssen Sie das Filterattribut verwenden um die visuellen Effekte des Elements (normalerweise So fügen Sie einem Bild mithilfe von CSS einen Unschärfeebeneneffekt hinzu

Wenn der Attributwert Unschärfe (px) ist, legen Sie die Gaußsche Unschärfe für das Bild fest. Der „Radius“-Wert legt die Standardabweichung der Gaußschen Funktion fest, oder wie viele Pixel auf dem Bildschirm zusammengemischt werden. Je größer der Wert, desto unschärfer ist er.

Wenn kein Wert festgelegt ist, ist der Standardwert 0; Dieser Parameter kann den CSS-Längenwert festlegen, akzeptiert jedoch keine Prozentwerte.

Das Beispiel sieht wie folgt aus: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <style>
.img1 {
    filter: blur(2px);
}
    </style>
  设置了模糊效果：<br><img  src="1118.01.png" class="img1" alt="So fügen Sie einem Bild mithilfe von CSS einen Unschärfeebeneneffekt hinzu" ><br>
  没设置模糊效果：<br><img  src="1118.01.png" class="img2" alt="So fügen Sie einem Bild mithilfe von CSS einen Unschärfeebeneneffekt hinzu" >
</body>
</html>

Ausgabeergebnis:

So fügen Sie einem Bild mithilfe von CSS einen Unschärfeebeneneffekt hinzu

Bei Interesse können Sie weiterhin Folgendes besuchen: css-Video-Tutorial.

Das obige ist der detaillierte Inhalt vonSo fügen Sie einem Bild mithilfe von CSS einen Unschärfeebeneneffekt hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 css css3 Filter
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：Mit 20 beliebten Homepage-Layout-Stilen gibt es immer einen, der zu Ihnen passt!Nächster Artikel：Mit 20 beliebten Homepage-Layout-Stilen gibt es immer einen, der zu Ihnen passt!

In Verbindung stehende Artikel

Mehr sehen