Imagem acinzentada com CSS?

183

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.

Richard Poirier
fonte

Respostas:

234

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;
    }
Owen
fonte
6
Bom e velho explorador de internet. Você pode fazer mais com o atributo filter; como ele usa o DirectDraw para fazer a renderização. Mas, em seguida, ele só funciona no IE
Eu tive que fazer usando jQuery .. eu fiz $ ( "# imgid") filter.opacity = "0.3".
Avdhut Vaidya
183

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/

nmsdvid
fonte
9
para torná-lo ainda mais escuro, adicione contrast(x%)propriedade, por exemplo grayscale(100%) contrast(30%).
Dennis Golomazov 01/07/2013
3
O suporte ao navegador é um problema real, uma vez que definitivamente não funciona no IE10, IE11, FF26, Safari 5.1.x (Win7 x64), ou basicamente qualquer coisa fora do Chrome (exemplo.)
nickb
2
Isso não permite configurá-lo para um cinza claro, mas se em um fundo branco, você pode usá-lo em conjunto com a opacidade para que isso aconteça; img { filter: grayscale(100%); opacity: 0.4; }
Ezward
53

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?
Sakata Gintoki
fonte
1
Obrigado! Esta é a única resposta que me ajudou a fazer isso funcionar no Firefox!
Jamie Carl
@ Jamie Carl: Ainda bem que posso ajudar. Este trabalho código de boa em todos os navegadores :)
Sakata Gintoki
@ErenYeager em ungray, por que zoom: 1? Eu acho que isso é um erro?
para
24

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);
Nathan Long
fonte
5
Apenas tropeçou na minha antiga resposta aqui novamente. Não há como usar JS para isso agora. CSS puro é muito melhor.
21915 Nathan Long
20

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 */ 
}
alexmeia
fonte
Whoah! Não há invólucros. Obrigado!
Pavel Vlasov
3

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>
Dave Jensen
fonte
3

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

Константин Ван
fonte
1
contraste era o que eu queria
Simon Zyx
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.

OsamaBinLogin
fonte
0

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.

VonC
fonte
opacidade é um recurso que CSS3, a parte do filtro é para MSIE especificamente, outros navegadores vai pegar opacidade
Owen