Gray image avec CSS ?

Question

Ce qui est le meilleur moyen (le cas échéant) de faire une image apparaît « grisé » avec CSS (c.-à-d., sans chargement un séparé, grisé de version de l’image) ?

Mon contexte, c’est que j’ai des lignes d’une table qu’ont tous les boutons dans le droit la plupart des cellules et certaines lignes besoin de regarder plus léger que les autres. Donc je peux rendre la police plue facilement, bien sûr, mais je tiens également à rendre les images plus légers sans avoir à gérer les deux versions de chaque image.

Answer 1

Doit-il être gris ? Vous pouvez affecter seulement l’opacité de l’image inférieure (à il terne). Vous pouvez également créer un `` de superposition et la valeur qu’il s’agit de gray (changer l’alpha pour obtenir l’effet).

• HTML :
• CSS :

Answer 2

Utilisez la propriété filter de CSS3 :

La prise en charge de navigateur est un peu mal mais c’est 100 % CSS. Un bel article sur la propriété filter de CSS3 vous pouvez trouver ici : http://blog.nmsdvid.com/css-filter-property/

Answer 3

Votre ici:

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

Css Gris:

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;
    -webkit-filter: grayscale(0%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    }

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

Edit: IE10+ ne prend pas en charge DX filtres comme IE9 et antérieures l'ont fait, ni ne prend en charge un préfixe version de l'échelle de gris filtre. Vous pouvez résoudre le problème, utilisez l'une dans les deux solutions ci-dessous:

1. Ensemble IE10+ à fournir à l'aide de normes IE9 en mode à l'aide de la meta élément dans la tête: <meta http-equiv="X-UA-Compatible" content="IE=9">
2. L'utilisation d'une SVG de superposition dans IE10 pour accomplir la greyscaling internet explorer 10 - howto appliquer des niveaux de gris filtre?

Answer 4

Si vous ne me dérange pas avec un peu de JavaScript, jQuery, fadeTo() fonctionne bien dans tous les navigateurs que j’ai essayé.

Answer 5

Mieux soutenir tous les navigateurs :