Comment obtenir des images d'arrière-plan en niveaux de gris avec la compatibilité CSS entre navigateurs ?

Comment obtenir des images d'arrière-plan en niveaux de gris avec la compatibilité CSS entre navigateurs

Créer une image d'arrière-plan en niveaux de gris à l'aide de CSS peut être un défi en raison des incohérences du navigateur . Voici une solution complète qui fonctionne sur différents navigateurs :

Méthode 1 : Filtre CSS3

La propriété de filtre CSS3, spécifiquement grayscale(), vous permet d'appliquer un effet de niveaux de gris aux images d’arrière-plan. Cependant, cette technique n'est prise en charge que par les navigateurs modernes comme Chrome et Safari.

Exemple :

<code class="CSS">.grayscale {
  background-image: url(yourimage.jpg);
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}</code>

Méthode 2 : Filtre SVG

Pour une compatibilité entre navigateurs, vous pouvez utiliser un filtre SVG pour obtenir des effets en niveaux de gris. Cette méthode nécessite de définir un filtre dans un document SVG et de le référencer dans votre CSS.

Exemple :

Filtre SVG :

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

CSS :

<code class="CSS">.grayscale {
  background-image: url(yourimage.jpg);
  filter: url(#grayscale);
}</code>

Méthode 3 : jQuery Toggle

Si vous souhaitez basculer entre les niveaux de gris et non -niveaux de gris dynamiquement, vous pouvez utiliser jQuery.

Exemple :

jQuery :

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

HTML :

<code class="HTML"><div id="image" class="nongrayscale">
  Rollover this image to toggle grayscale
</div></code>

CSS :

<code class="CSS">.grayscale {
  background: url(yourimagehere.jpg);
  -moz-filter: url("data:image/svg+xml;utf8,...");
  -o-filter: url("data:image/svg+xml;utf8,...");
  -webkit-filter: grayscale(100%);
  filter: gray;
  filter: url("data:image/svg+xml;utf8,...");
}

.nongrayscale {
  background: url(yourimagehere.jpg);
}</code>

Compatibilité IE10-11 :

Pour IE10 et IE11, une approche alternative consiste à utiliser un filtre SVG avec un élément feColorMatrix.

Exemple :

<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="yourimage.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!