Comment obtenir des effets de niveaux de gris multi-navigateurs sur les images d'arrière-plan CSS ?

Solution multi-navigateurs pour atténuer les images d'arrière-plan CSS en niveaux de gris

Malgré la disponibilité du filtre CSS3, l'application d'effets en niveaux de gris aux images d'arrière-plan reste un défi sur différents navigateurs. La solution utilisant le filtre SVG fonctionne pour Safari et Chrome, mais pas pour les autres navigateurs.

Pour surmonter cette limitation, une approche alternative consiste à utiliser du code SVG en ligne pour créer un filtre personnalisé. Cette méthode est compatible avec tous les navigateurs modernes, y compris IE10 et 11.

Exemple de code pour IE10-11 :

<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="http://www.polyrootstattoo.com/images/Artists/Buda/40.jpg" width="600" height="600" filter="url(#desaturate)" />
</svg></code>

Solution jQuery pour basculer l'effet en niveaux de gris :

Si vous souhaitez activer/désactiver dynamiquement l'effet de niveaux de gris, vous pouvez utiliser jQuery :

<code class="html"><div id="image" class="nongrayscale">
  rollover this image to toggle grayscale
</div></code>

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