Comment utiliser la propriété Filtre dans CSS

La propriété du filtre CSS permet d'appliquer des effets visuels comme le flou, la luminosité et l'échelle de gris directement aux éléments HTML. 1) Utilisez le filtre de syntaxe: filtre-fonction (valeur) pour appliquer les effets. 2) Combinez plusieurs filtres avec la séparation de l'espace, par exemple, flou (2px) (70%). 3) Les fonctions communes incluent Blur (), la luminosité (), le contraste (), l'écale de gris (), le hue-rotate (), le invert (), l'opacité (), le saturote () et le sépia (). 4) Appliquer des filtres pour les effets de survol, les ajustements en mode sombre, les arrière-plans flous et les états handicapés. 5) Assurer les performances en évitant une utilisation excessive sur les grands éléments et préférez le filtre de fond pour le flou d'arrière-plan. 6) Les filtres sont non destructifs et largement pris en charge dans les navigateurs modernes, ce qui les rend idéaux pour des améliorations visuelles dynamiques et performantes sans modifier le contenu original.

La propriété CSS filter est un outil puissant pour appliquer des effets visuels aux éléments - le plus souvent des images, mais aussi des vidéos, des boutons ou tout autre élément HTML. Il vous permet de modifier le rendu du contenu à l'aide d'effets tels que le flou, le réglage de la luminosité, l'éducation des gris, etc., le tout directement via CSS sans avoir besoin de logiciels d'édition d'image ou JavaScript.

Voici comment l'utiliser efficacement.

Syntaxe de base

La propriété filter prend une ou plusieurs fonctions de filtre comme sa valeur. La syntaxe générale est:

 élément {
  filtre: filtre-fonction (valeur);
}

Plusieurs filtres peuvent être appliqués en les séparant avec des espaces:

 img {
  Filtre: luminosité floue (2px) (70%) (120%);
}

Fonctions de filtre communes

Chaque fonction de filtre ajuste un aspect visuel spécifique. Voici les plus largement utilisés:

• blur(px)
  Applique un flou gaussien. Plus la valeur des pixels est élevée, plus l'élément est flou.
  Exemple: filter: blur(3px); - Bon pour les effets de flou d'arrière-plan.

• brightness(%)
  Ajuste la luminosité. 100% signifie aucun changement. Plus de 100% le rend plus brillant, sous le rend plus sombre.
  Exemple: filter: brightness(50%); - Utile pour la gradation de survol.

• contrast(%)
  Ajuste le contraste. 100% est inchangé. Des valeurs plus faibles réduisent le contraste, augmentent plus.
  Exemple: filter: contrast(150%);

• grayscale(%)
  Convertit l'élément en niveaux de gris. 100% est entièrement gris, 0% est de couleur pleine.
  Exemple: filter: grayscale(100%); - Souvent utilisé sur les images dans des états inactifs.

• hue-rotate(deg)
  Tourne la roue chromatique. Accepte les valeurs de diplôme (0deg à 360deg).
  Exemple: filter: hue-rotate(90deg); - déplace les couleurs à travers le spectre.

• invert(%)
  Inverse les couleurs. 100% signifie entièrement inversé.
  Exemple: filter: invert(100%); - Utilisé en mode sombre bascule.

• opacity(%)
  Définit la transparence. Semblable à la propriété CSS opacity , mais fonctionne dans la chaîne de filtre.
  Exemple: filter: opacity(50%);

• saturate(%)
  Ajuste la saturation des couleurs. 100% est normal, les valeurs plus élevées intensifient les couleurs.
  Exemple: filter: saturate(200%);

• sepia(%)
  Applique une tonalité sépia. 100% donne un effet photo vintage.
  Exemple: filter: sepia(80%);

Cas d'utilisation pratiques

• Effets de survol de l'image
  Rendre les images plus engageantes sur le plan de volants:

   IMG: Hover {
    Filtre: luminosité (120%) sature (150%);
    Transition: Filtre 0,3S facilité;
  }

• Réglages en mode sombre
  Inversez ou ajustez le contraste pour le contenu intégré:

   .dark-mode iframe {
    Filtre: Invert (1) Hue-rotate (180deg);
  }

• Arrière-plans flous (effet de toile de fond)
  Tandis que backdrop-filter est meilleur pour les superpositions transparentes, filter: blur() fonctionne sur l'élément lui-même:

   .blurred-box {
    Filtre: Blur (4px);
  }

• États handicapés
  Éléments visuellement accentués:

   .
    Filtre: Opacité des gris (100%) (60%);
  }

  ---

  Performances et support du navigateur

  • Les filtres sont généralement accélérés en matériel, ils fonctionnent donc bien.
  • Utilisez will-change ou transform: translateZ(0) prudemment si vous remarquez un retard sur de grands éléments.
  • La plupart des navigateurs modernes prennent en charge filter , mais les versions plus anciennes d'Internet Explorer ne le font pas.
  • Pour les effets en toile de fond (brouillant ce qui se trouve derrière un élément), utilisez plutôt backdrop-filter .

  ---

  Notes finales

  La propriété filter est non destructive - votre image ou votre contenu original reste inchangé. Il est idéal pour les améliorations subtiles ou la rétroaction de l'interface utilisateur dynamique. Évitez simplement de trop utiliser des filtres lourds comme les gros flous sur les grands éléments, car ils peuvent avoir un impact sur les performances sur les appareils bas de gamme.

  Fondamentalement, si vous souhaitez modifier les visuels rapidement et proprement, filter est une fonction CSS incontournable.

  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!