Qual é a melhor maneira (se houver) de fazer uma imagem parecer "acinzentada" com CSS (ou seja, sem carregar uma versão separada e acinzentada da imagem)?

Meu contexto é que tenho linhas em uma tabela, todas com botões na célula mais à direita e algumas linhas precisam parecer mais claras que outras. É claro que posso tornar a fonte mais clara com facilidade, mas também gostaria de tornar as imagens mais claras sem precisar gerenciar duas versões de cada imagem.

Tem que ser cinza? Você pode definir a opacidade da imagem mais baixa (para diminuir a intensidade). Como alternativa, você pode criar uma <div>sobreposição e configurá-la para cinza (altere o alfa para obter o efeito).

• 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;
  }

Use a propriedade de filtro CSS3:

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

O suporte ao navegador é um pouco ruim, mas é 100% CSS. Um bom artigo sobre a propriedade de filtro CSS3 que você pode encontrar aqui: http://blog.nmsdvid.com/css-filter-property/

Você está aqui:

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

Css Cinza:

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 */
    }

Encontrei-o em: http://zkiwi.com/topic/chuyen-hinh-mau-thanh-trang-den-bang-css-nhu-the-nao

Edit: O IE10 + não suporta filtros DX como o IE9 e anteriores, nem uma versão prefixada do filtro em escala de cinza. Você pode corrigi-lo, use uma entre duas soluções abaixo:

1. Defina o IE10 + para renderizar usando o modo de padrões IE9 usando o seguinte elemento meta na cabeça: <meta http-equiv="X-UA-Compatible" content="IE=9">
2. Use uma sobreposição SVG no IE10 para realizar o Internet Explorer 10 em escala de cinza - como aplicar o filtro em escala de cinza?

Se você não se importa em usar um pouco de JavaScript, o fadeTo () do jQuery funciona bem em todos os navegadores que tentei.

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

Melhor oferecer suporte a todos os navegadores:

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

Aqui está um exemplo que permite definir a cor do plano de fundo. Se você não quiser usar o flutuador, poderá ser necessário definir a largura e a altura manualmente. Mas mesmo isso realmente depende do CSS / HTML circundante.

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

Para esmaecer:

"Acromatizar".

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>

"Para preencher com cinza."

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>

Notas úteis

• Qual é a diferença entre a escala de cinza do filtro CSS3 e a saturação?

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

Você pode usar rgba()em css para definir uma cor em vez de rgb(). Como isso: style='background-color: rgba(128,128,128, 0.7);

Dá a você a mesma cor, rgb(128,128,128)mas com uma opacidade de 70%; portanto, o material por trás mostra apenas 30%. CSS3, mas funciona na maioria dos navegadores desde 2008. Desculpe, nenhuma sintaxe de #rrggbb que eu conheça. Brinque com os números - você pode lavar com branco, sombra com cinza, o que quiser diluir.

OK, você cria um retângulo em cinza semitransparente (ou qualquer cor) e o coloca em cima da imagem, talvez com a posição: absoluta e um índice z maior que zero e coloca-o imediatamente antes da imagem e do padrão a localização do retângulo será o mesmo canto superior esquerdo da sua imagem. Deveria trabalhar.

Considerando filter: expression é uma extensão da Microsoft para CSS, portanto, ele funcionará apenas no Internet Explorer. Se você quiser esmaecer, eu recomendo que você defina sua opacidade para 50% usando um pouco de javascript.

http://lyxus.net/mv seria um bom ponto de partida, pois discute um script de opacidade que funciona com os navegadores compatíveis com Firefox, Safari, KHTML, Internet Explorer e CSS3.

Você também pode dar uma borda cinza.