Imagens de Css de fundo em tons de cinza

Eu pesquisei muito na web, mas não consigo encontrar uma solução cross-browser para desvanecer uma imagem de fundo css para escala de cinza e de volta.

A única solução de trabalho é aplicar o filtro de tons de cinza CSS3:

-webkit-filter: grayscale(100%); 

mas isso funciona apenas com o Chrome v.15 + e o Safari v.6 + (como você pode ver aqui: http://css3.bradshawenterprises.com/filters/ )

Muitas páginas online falam sobre esta solução para elementos cinza:

 filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */ filter: gray; /* IE6-9 */ 

(como você pode ver aqui: http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html )

Mas, na verdade, parece que não funciona para imagens de plano de fundo do css, como faz o filtro do kit de hospedagem.

Existe alguma solução (talvez com jquery?) Para cortar essa falta de suporte para filtro em navegadores menos avançados?

Aqui está:

   bluantinoo CSS Grayscale Bg Image Sample    
this is a non-grayscale of the bg image
this is a grayscale of the bg image

Testado em FireFox, Chrome e IE. Eu também anexei uma imagem para mostrar meus resultados da minha implementação. Imagem de plano de fundo em tons de cinza na amostra DIV

EDIT: Além disso, se você quiser que a imagem apenas alternar para trás e para frente com jQuery, aqui está a fonte da página para isso … Eu incluí o link da web para jQuery ee imagem que está online, então você deve apenas ser capaz de copiar / cole para testar:

   bluantinoo CSS Grayscale Bg Image Sample      
rollover this image to toggle grayscale

EDIT 2 (Para usuários do IE10-11): A solução acima não funcionará com as alterações que a Microsoft fez no navegador ultimamente, portanto, aqui está uma solução atualizada que permitirá que você escale (ou desature) suas imagens em escala de cinza.

         

Usando os navegadores atuais, você pode usá-lo assim:

 img { -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); } 

e para remediar:

 img:hover{ -webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */ filter: grayscale(0%); } 

trabalhou comigo e é muito mais curto. Há ainda mais coisas que podemos fazer dentro do CSS:

 filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); 

Para mais informações e suporte a navegadores, veja isto: http://www.w3schools.com/cssref/css3_pr_filter.asp

Você também pode usar:

 img{ filter:grayscale(100%); } img:hover{ filter:none; } 

Você não precisa usar codificação complicada de verdade!

Pairar em tons de cinza:

-webkit-filter: escala de cinza (100%);

“Hover-out” em tons de cinza:

-webkit-filter: escala de cinza (0%);


Eu simplesmente fiz minha class css ter uma class hover separada e adicionada na segunda escala de cinza. É muito simples se você realmente não gosta de complexidade.

Intereting Posts