Utilisez des filtres CSS pour créer des images ou du texte flous-tutoriel CSS-php.cn

Utilisez des filtres CSS pour créer des images ou du texte flous

PHPz

Libérer： 2023-08-26 22:01:02

avant

1441 Les gens l'ont consulté

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

Motion Blur est utilisé pour créer des images ou du texte flous avec direction et intensité.

Les paramètres suivants peuvent être utilisés dans ce filtre

S.No	Paramètres et description
1	Ajouter Vrai ou faux. Si vrai, l'image est ajoutée à l'image floue ; si faux, l'image n'est pas ajoutée à l'image floue.
2	Direction Direction floue, dans le sens des aiguilles d'une montre, arrondie par incréments de 45 degrés. La valeur par défaut est 270 (à gauche). 0 = Haut 45 = En haut à droite 90 = Droite 135 = En bas à droite 180 = En bas 225 = En bas à gauche 270 = Gauche 315 = En haut à gauche
3	Force Le nombre de pixels que le flou va étendre. La valeur par défaut est de 5 pixels.

S.No

Paramètres et description

Ajouter

Vrai ou faux. Si vrai, l'image est ajoutée à l'image floue ; si faux, l'image n'est pas ajoutée à l'image floue.

Direction

Direction floue, dans le sens des aiguilles d'une montre, arrondie par incréments de 45 degrés. La valeur par défaut est 270 (à gauche).

0 = Haut

45 = En haut à droite

90 = Droite

135 = En bas à droite

180 = En bas

225 = En bas à gauche

270 = Gauche

315 = En haut à gauche

Force

Le nombre de pixels que le flou va étendre. La valeur par défaut est de 5 pixels.

Exemple

Vous pouvez essayer d'exécuter le code suivant pour flouter une image

Démo en direct

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

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!