Heim >Web-Frontend >CSS-Tutorial >Verwenden Sie CSS-Filter, um unscharfe Bilder oder Texte zu erstellen

Verwenden Sie CSS-Filter, um unscharfe Bilder oder Texte zu erstellen

PHPz
PHPznach vorne
2023-08-26 22:01:021393Durchsuche

使用 CSS 滤镜创建模糊的图片或文本

Bewegungsunschärfe wird verwendet, um verschwommene Bilder oder Texte mit Richtung und Intensität zu erstellen.

Die folgenden Parameter können in diesem Filter verwendet werden:

Richtig oder falsch. Bei „true“ wird das Bild zum unscharfen Bild hinzugefügt; bei „false“ wird das Bild nicht zum unscharfen Bild hinzugefügt. 0 = Oben 45 = Oben rechts 135 = Unten rechts
S.Nr.: Parameter und Beschreibung: 1

Hinzufügen:

2

Richtung

Unscharfe Richtung, im Uhrzeigersinn, auf 45-Grad-Schritte gerundet. Der Standardwert ist 270 (links).

90 = Rechts

180 = Unten 225 = Unten links

270 = Links

315 = Oben links

3

Stärke

Die Anzahl der Pixel, um die sich die Unschärfe erweitert. Der Standardwert ist 5 Pixel.

Beispiel

Sie können versuchen, den folgenden Code auszuführen, um ein Bild zu verwischenLive-Demo
<html>
   <head>
   </head>
   <body>
      <img src = "/css/images/logo.png" alt="CSS Logo" style = "Filter: Blur(Add = 0, Direction = 225, Strength = 10)">
      <p>Text Example:</p>
      <div style="width: 357;
         height: 50;
         font-size: 30pt;
         font-family: Arial Black;
         color: blue;
         Filter: Blur(Add = 1, Direction = 225, Strength = 10)">CSS Tutorials</div>
   </body>
</html>

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS-Filter, um unscharfe Bilder oder Texte zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen