Quelle est la meilleure façon (le cas échéant) de faire apparaître une image «grisée» avec CSS (c'est-à-dire sans charger une version séparée et grisée de l'image)?

Mon contexte est que j'ai des lignes dans un tableau qui ont toutes des boutons dans la cellule la plus à droite et certaines lignes doivent paraître plus claires que d'autres. Je peux donc alléger facilement la police bien sûr mais j'aimerais aussi éclaircir les images sans avoir à gérer deux versions de chaque image.

Doit-il être gris? Vous pouvez simplement définir l'opacité de l'image plus bas (pour l'atténuer). Vous pouvez également créer une <div>superposition et la définir comme grise (changer l'alpha pour obtenir l'effet).

• html:

  <div id="wrapper">
      <img id="myImage" src="something.jpg" />
  </div>

• css:

  #myImage {
      opacity: 0.4;
      filter: alpha(opacity=40); /* msie */
  }
  
  /* or */
  
  #wrapper {
      opacity: 0.4;
      filter: alpha(opacity=40); /* msie */
      background-color: #000;
  }

Utilisez la propriété de filtre CSS3:

img {
    -webkit-filter: grayscale(100%);
       -moz-filter: grayscale(100%);
         -o-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
            filter: grayscale(100%); 
}

Le support du navigateur est un peu mauvais mais c'est 100% CSS. Un bel article sur la propriété du filtre CSS3 que vous pouvez trouver ici: http://blog.nmsdvid.com/css-filter-property/

Votre ici:

<a href="#"><img src="img.jpg" /></a>

Gris Css:

img{
    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"); /* Firefox 10+, Firefox on Android */
    filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */}

Ungray:

a:hover img{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: none ; /* IE6-9 */
    zoom:1; /* needed to trigger "hasLayout" in IE if no width or height is set */
    -webkit-filter: grayscale(0%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    }

Je l'ai trouvé sur: http://zkiwi.com/topic/chuyen-hinh-mau-thanh-trang-den-bang-css-nhu-the-nao

Edit: IE10 + ne prend pas en charge les filtres DX comme IE9 et les précédents l'ont fait, ni ne prend en charge une version préfixée du filtre en niveaux de gris. Vous pouvez le réparer, utilisez une solution sur deux ci-dessous:

1. Configurez IE10 + pour qu'il effectue le rendu en utilisant le mode standard IE9 en utilisant le méta-élément suivant dans la tête: <meta http-equiv="X-UA-Compatible" content="IE=9">
2. Utilisez une superposition SVG dans IE10 pour effectuer la mise à l'échelle de gris d' Internet Explorer 10 - comment appliquer un filtre de niveaux de gris?

Si cela ne vous dérange pas d'utiliser un peu de JavaScript, fadeTo () de jQuery fonctionne bien dans tous les navigateurs que j'ai essayés.

jQuery(selector).fadeTo(speed, opacity);

Mieux vaut prendre en charge tous les navigateurs:

img.lessOpacity {               
   opacity: 0.4;
   filter: alpha(opacity=40);
   zoom: 1;  /* needed to trigger "hasLayout" in IE if no width or height is set */ 
}

Voici un exemple qui vous permet de définir la couleur de l'arrière-plan. Si vous ne souhaitez pas utiliser float, vous devrez peut-être définir manuellement la largeur et la hauteur. Mais même cela dépend vraiment du CSS / HTML environnant.

<style>
#color {
  background-color: red;
  float: left;
}#opacity    {
    opacity : 0.4;
    filter: alpha(opacity=40); 
}
</style>

<div id="color">
  <div id="opacity">
    <img src="image.jpg" />
  </div>
</div>

Pour griser:

«Achromatiser.»

filter: grayscale(100%);

@keyframes achromatization {
	0% {}
	25% {}
	75% {filter: grayscale(100%);}
	100% {filter: grayscale(100%);}
}

p {
	font-size: 5em;
	color: yellow;
	animation: achromatization 2s ease-out infinite alternate;
}
p:first-of-type {
	background-color: dodgerblue;
}

<p>
	⚡ Bzzzt!
</p>
<p>
	⚡ Bzzzt!
</p>

"Remplir de gris."

filter: contrast(0%);

@keyframes gray-filling {
	0% {}
	25% {}
	50% {filter: contrast(0%);}
	60% {filter: contrast(0%);}
	70% {filter: contrast(0%) brightness(0%) invert(100%);}
	80% {filter: contrast(0%) brightness(0%) invert(100%);}
	90% {filter: contrast(0%) brightness(0%);}
	100% {filter: contrast(0%) brightness(0%);}
}

p {
	font-size: 5em;
	color: yellow;
	animation: gray-filling 5s ease-out infinite alternate;
}
p:first-of-type {
	background-color: dodgerblue;
}

<p>
	⚡ Bzzzt!
</p>
<p>
	⚡ Bzzzt!
</p>

Notes utiles

• Quelle est la différence entre les niveaux de gris du filtre CSS3 et la saturation?

• https://www.w3.org/TR/filter-effects-1

Vous pouvez utiliser rgba()en css pour définir une couleur au lieu dergb() . Comme ça: style='background-color: rgba(128,128,128, 0.7);

Vous donne la même couleur que rgb(128,128,128) mais avec une opacité de 70%, de sorte que le contenu derrière ne s'affiche que jusqu'à 30%. CSS3 mais il fonctionne dans la plupart des navigateurs depuis 2008. Désolé, pas de syntaxe #rrggbb que je connaisse. Jouez avec les chiffres - vous pouvez laver avec du blanc, des ombres avec du gris, tout ce que vous voulez diluer.

OK donc vous faites un rectangle en gris semi-transparent (ou n'importe quelle couleur) et le posez au-dessus de votre image, peut-être avec la position: absolue et un z-index supérieur à zéro, et vous le mettez juste avant votre image et la valeur par défaut l'emplacement du rectangle sera le même coin supérieur gauche de votre image. Devrait marcher.

Compte tenu du filtre: expression est une extension Microsoft de CSS, elle ne fonctionnera donc que dans Internet Explorer. Si vous souhaitez le griser, je vous recommande de définir son opacité à 50% en utilisant un peu de javascript.

http://lyxus.net/mv serait un bon point de départ, car il traite d'un script d'opacité qui fonctionne avec les navigateurs compatibles Firefox, Safari, KHTML, Internet Explorer et CSS3.

Vous voudrez peut-être également lui donner une bordure grise.