Qual è il modo migliore (se presente) per far apparire un'immagine "oscurata" con CSS (ovvero, senza caricare una versione separata e grigia dell'immagine)?

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

Deve essere grigio? Potresti semplicemente abbassare l'opacità dell'immagine (per attenuarla). In alternativa, è possibile creare un <div>overlay e impostarlo in grigio (modificare l'alfa per ottenere l'effetto).

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

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 'cattivo ma è CSS al 100%. Un bell'articolo sulla proprietà del filtro CSS3 che puoi trovare qui: http://blog.nmsdvid.com/css-filter-property/

Il tuo qui:

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

Css Grey:

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

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 versioni precedenti, né supporta una versione con prefisso del filtro in scala di grigi. Puoi risolverlo, usa una delle due soluzioni seguenti:

1. Imposta IE10 + per il rendering usando la modalità standard IE9 usando il seguente meta elemento nella testa: <meta http-equiv="X-UA-Compatible" content="IE=9">
2. Utilizzare un overlay SVG in IE10 per realizzare Internet Explorer 10 grigio - come applicare il filtro di scala di grigi?

Se non ti dispiace usare un po 'di JavaScript, jQuery's fadeTo () funziona bene in tutti i 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 ti 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 dal CSS / HTML circostante.

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

Per oscurare:

"Per acromatizzare".

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>

"Riempire di grigio".

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>

Note Utili

• Qual è la differenza tra il filtro CSS3 in scala di grigi e saturato?

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

È possibile utilizzare rgba()in CSS per definire un colore anziché rgb(). Come questo: style='background-color: rgba(128,128,128, 0.7);

Ti dà lo stesso colore rgb(128,128,128)ma con un'opacità del 70%, quindi le cose dietro mostrano solo fino al 30%. CSS3, ma ha funzionato nella maggior parte dei browser dal 2008. Spiacente, nessuna sintassi #rrggbb che conosco. Gioca con i numeri: puoi lavarti con il bianco, ombreggiare con il grigio, qualunque cosa tu voglia diluire.

OK, quindi fai un rettangolo in grigio semitrasparente (o di qualsiasi colore) e appoggialo sopra l'immagine, magari con la posizione: assoluto e un indice z superiore a zero, e lo metti appena prima dell'immagine e del valore predefinito la posizione per il rettangolo sarà lo stesso angolo in alto a sinistra dell'immagine. Dovrebbe funzionare.

Considerando il filtro: expression è un'estensione di Microsoft per CSS, quindi funzionerà solo in Internet Explorer. Se vuoi disattivarlo, ti consiglio di impostare l'opacità al 50% usando un po 'di javascript.

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

Potresti anche volergli dare un bordo grigio.