Immagine grigia con CSS?

Qual è il modo migliore (se esiste) per far apparire un’immagine “grigia” con i CSS (cioè senza caricare una versione separata, grigia della foto)?

Il mio contesto è che ho righe in una tabella che hanno tutti i pulsanti nella cella più a destra e alcune righe devono sembrare più chiare di altre. Quindi posso rendere il carattere più leggero facilmente, ma mi piacerebbe anche rendere le immagini più chiare senza dover gestire due versioni di ogni immagine.

Deve essere grigio? Potresti semplicemente impostare l’opacità dell’immagine in basso (per ottenerla). In alternativa, è ansible creare una sovrapposizione

e impostarla come grigia (cambiare l’alfa per ottenere l’effetto).

  • html:

     
  • css:

     #myImage { opacity: 0.4; filter: alpha(opacity=40); /* msie */ } /* or */ #wrapper { opacity: 0.4; filter: alpha(opacity=40); /* msie */ background-color: #000; } 

Usa la proprietà del filtro CSS3:

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

Il supporto del browser è un po ‘brutto ma è al 100% CSS. Un bel articolo sulla proprietà del filtro CSS3 che puoi trovare qui: http://blog.nmsdvid.com/css-filter-property/

Il tuo qui:

  

Grigio css:

 img{ filter: url("data:image/svg+xml;utf8,#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,#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 */ } 

L’ho trovato su: http://zkiwi.com/topic/chuyen-hinh-mau-thanh-trang-den-bang-css-nhu-the-nao

Modifica: IE10 + non supporta i filtri DX come IE9 e precedenti, né supporta una versione prefissata del filtro in scala di grigi. Puoi sistemarlo, usa una soluzione su due sotto:

  1. Impostare IE10 + per il rendering utilizzando la modalità standard IE9 utilizzando il seguente meta elemento nella testa:
  2. Utilizzare una sovrapposizione SVG in IE10 per realizzare il greyscaling internet explorer 10 – come applicare il filtro in scala di grigi?

Se non ti dispiace usare un po ‘di JavaScript, jQuery’s fadeTo () funziona bene in ogni browser che ho provato.

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

Meglio supportare tutti i browser:

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

Ecco un esempio che consente di impostare il colore dello sfondo. Se non si desidera utilizzare float, potrebbe essere necessario impostare manualmente la larghezza e l’altezza. Ma anche questo dipende molto dal CSS / HTML che lo circonda.

  

Puoi usare rgba() in css per definire un colore invece di rgb() . In questo modo: style='background-color: rgba(128,128,128, 0.7);

Ti dà lo stesso colore di rgb(128,128,128) ma con un’opacità del 70%, quindi la roba dietro mostra solo il 30%. CSS3 ma ha funzionato nella maggior parte dei browser dal 2008. Mi spiace, nessuna syntax #rrggbb che io conosca. Gioca con i numeri – puoi lavarti con il bianco, ombreggiare con il grigio, qualunque cosa vuoi diluire.

OK, quindi crea un rettangolo in grigio semitrasparente (o qualsiasi altro colore) e posizionalo sopra l’immagine, magari con la posizione: assoluta e uno z-index più alto di zero, e lo metti appena prima dell’immagine e il valore predefinito la posizione del rettangolo sarà lo stesso angolo superiore sinistro dell’immagine. Dovrebbe funzionare.

Considerando filtro: expression è un’estensione Microsoft per CSS, quindi funzionerà solo in Internet Explorer. Se vuoi renderlo grigio, ti consiglio di impostarne l’opacità al 50% usando un po ‘di javascript.

http://lyxus.net/mv sarebbe un buon punto di partenza, perché discute uno script di opacità che funziona con browser abilitati per Firefox, Safari, KHTML, Internet Explorer e CSS3.

Potresti anche dargli un bordo grigio.