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

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

Barbara Streisand

Libérer： 2024-10-28 17:19:29

original

792 Les gens l'ont consulté

How to Achieve Grayscale Background Images with CSS Cross-Browser Compatibility?

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>

Copier après la connexion

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>

Copier après la connexion

CSS :

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

Copier après la connexion

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>

Copier après la connexion

HTML :

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

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!