Comment créer des effets de niveaux de gris multi-navigateurs pour les images d'arrière-plan CSS ?

Niveaux de gris multi-navigateurs pour les images d'arrière-plan CSS

Les images d'arrière-plan peuvent ajouter de la profondeur et un intérêt visuel à une page Web, mais il est parfois souhaitable de les présenter dans un format désaturé ou en niveaux de gris. Bien que la propriété filter: grayscale() de CSS3 puisse obtenir cet effet dans les navigateurs modernes comme Chrome et Safari, elle n'est pas prise en charge dans les versions antérieures. Pour surmonter cette limitation, une solution multi-navigateurs est requise.

Filtre de secours :

Une approche consiste à utiliser la propriété filter: url() avec un SVG en ligne. filtre qui définit la conversion des niveaux de gris. Cette technique fonctionne sur la plupart des navigateurs, y compris Firefox, IE et Edge :

<code class="css">.grayscale {
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
}</code>

Le filtre SVG fourni définit une matrice de couleurs qui convertit chaque canal de couleur à 33,33 % de sa valeur d'origine, créant ainsi un effet de niveaux de gris. .

JQuery Toggle :

Si un changement dynamique d'échelle de gris est souhaité, jQuery peut être exploité pour appliquer et supprimer le filtre d'échelle de gris lors des événements de survol et de sortie de la souris :

<code class="javascript">$(document).ready(function () {
  $("#image").mouseover(function () {
    $(".nongrayscale").removeClass().fadeTo(400, 0.8).addClass("grayscale").fadeTo(400, 1);
  });
  $("#image").mouseout(function () {
    $(".grayscale").removeClass().fadeTo(400, 0.8).addClass("nongrayscale").fadeTo(400, 1);
  });
});</code>

Ce script active l'effet de niveaux de gris sur l'image avec une animation de fondu entrant et sortant fluide.

Désaturation SVG :

Dans des versions plus récentes versions d'IE (10-11), les solutions ci-dessus peuvent ne pas fonctionner en raison de changements dans leur implémentation SVG. Pour ces navigateurs, une approche alternative basée sur SVG peut être utilisée pour désaturer l'image :

<code class="html"><svg>
  <defs>
    <filter xmlns="http://www.w3.org/2000/svg" id="desaturate">
      <feColorMatrix type="saturate" values="0" />
    </filter>
  </defs>
  <image xlink:href="your_image.jpg" width="600" height="600" filter="url(#desaturate)" />
</svg></code>

Cette méthode convertit l'image en niveaux de gris en définissant la valeur de saturation de la matrice de couleur sur 0.

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!