Verwenden Sie CSS-Filter, um unscharfe Bilder oder Texte zu erstellen-CSS-Tutorial-php.cn

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

PHPz

Freigeben： 2023-08-26 22:01:02

nach vorne

1437 Leute haben es durchsucht

使用 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> Nach dem Login kopieren

S.Nr.: Parameter und Beschreibung: 1

Hinzufügen:

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

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>

Nach dem Login kopieren

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!