Maison > Article > interface Web > Utilisez des filtres CSS pour créer des images ou du texte flous

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

PHPzavant: 2023-08-26 22:01:021379parcourir

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

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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment définir l’indentation de la deuxième ligne d’un paragraphe en utilisant CSS ?Article suivant：Comment définir l’indentation de la deuxième ligne d’un paragraphe en utilisant CSS ?

Articles Liés

Voir plus