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.
Use a propriedade de filtro CSS3:
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/
fonte
contrast(x%)
propriedade, por exemplograyscale(100%) contrast(30%)
.img { filter: grayscale(100%); opacity: 0.4; }
Você está aqui:
Css Cinza:
Ungray:
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:
<meta http-equiv="X-UA-Compatible" content="IE=9">
fonte
Se você não se importa em usar um pouco de JavaScript, o fadeTo () do jQuery funciona bem em todos os navegadores que tentei.
fonte
Melhor oferecer suporte a todos os navegadores:
fonte
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.
fonte
Para esmaecer:
"Acromatizar".
"Para preencher com cinza."
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
fonte
Você pode usar
rgba()
em css para definir uma cor em vez dergb()
. 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.
fonte
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.
fonte