Comment puis-je obtenir une compatibilité entre navigateurs pour les images d’arrière-plan en niveaux de gris en CSS ?

Images d'arrière-plan en niveaux de gris en CSS

Problème :

Obtenir la prise en charge de la décoloration entre navigateurs Les images d'arrière-plan CSS en niveaux de gris restent un défi. Bien que l'effet de niveaux de gris du filtre CSS3 fonctionne efficacement dans les navigateurs modernes comme Chrome et Safari, il échoue dans les navigateurs plus anciens tels que Firefox, IE et les navigateurs mobiles.

Solution :

Utilisation de filtres SVG :

La solution implique l'utilisation de filtres SVG, qui fournissent une approche multi-navigateurs pour appliquer des transformations de couleur. Cette technique consiste à créer une URL de données avec le filtre SVG suivant :

<code class="svg"><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">/</feColorMatrix>
</filter>
</svg></code>

En appliquant ce filtre à l'image de fond à l'aide de la propriété filter, on peut obtenir un effet de niveaux de gris :

<code class="css">.grayscale {
  -webkit-filter: grayscale(100%);
  filter: gray;
  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>

Utilisation de jQuery pour le basculement dynamique :

Pour le basculement dynamique de l'effet de niveaux de gris, vous pouvez utiliser jQuery :

<code class="jquery">$(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>

Compatibilité IE10-11 :

Pour IE10-11, une autre approche est requise en raison des changements dans le rendu du navigateur. Le filtre SVG suivant peut être utilisé pour la désaturation, obtenant un effet d'échelle de gris similaire :

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

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!