¿Cuál es la mejor manera (si la hay) de hacer que una imagen aparezca "atenuada" con CSS (es decir, sin cargar una versión de la imagen atenuada por separado)?

Mi contexto es que tengo filas en una tabla que tienen botones en la celda más a la derecha y algunas filas deben verse más claras que otras. Entonces, por supuesto, puedo aclarar la fuente fácilmente, pero también me gustaría aclarar las imágenes sin tener que administrar dos versiones de cada imagen.

¿Tiene que ser gris? Simplemente puede establecer la opacidad de la imagen más baja (para opacarla). Alternativamente, puede crear una <div>superposición y configurarla para que sea gris (cambie el alfa para obtener el efecto).

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

Use la propiedad de filtro CSS3:

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

El soporte del navegador es un poco malo pero es 100% CSS. Un buen artículo sobre la propiedad de filtro CSS3 que puede encontrar aquí: http://blog.nmsdvid.com/css-filter-property/

Tu aqui:

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

Css gris:

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

Desagradable:

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

Lo encontré en: http://zkiwi.com/topic/chuyen-hinh-mau-thanh-trang-den-bang-css-nhu-the-nao

Editar: IE10 + no admite filtros DX como IE9 y anteriores lo han hecho, ni admite una versión prefijada del filtro de escala de grises. Puede solucionarlo, use una de las dos soluciones a continuación:

1. Configure IE10 + para renderizar usando el modo estándar IE9 usando el siguiente meta elemento en la cabeza: <meta http-equiv="X-UA-Compatible" content="IE=9">
2. Use una superposición SVG en IE10 para lograr la escala de grises de Internet Explorer 10: ¿cómo aplicar el filtro de escala de grises?

Si no le importa usar un poco de JavaScript, el fadeTo () de jQuery funciona bien en todos los navegadores que he probado.

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

Es mejor admitir todos los 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 */ 
}

Aquí hay un ejemplo que le permite establecer el color del fondo. Si no desea utilizar flotante, es posible que deba establecer el ancho y la altura manualmente. Pero incluso eso realmente depende del 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>

Para atenuar:

"Para lograr".

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 llenar de gris".

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

• ¿Cuál es la diferencia entre CSS3 filter grayscale y saturate?

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

Puede usar rgba()en css para definir un color en lugar de rgb(). Me gusta esto: style='background-color: rgba(128,128,128, 0.7);

Te da el mismo color que rgb(128,128,128) pero con una opacidad del 70%, por lo que las cosas detrás solo muestran hasta el 30%. CSS3 pero ha funcionado en la mayoría de los navegadores desde 2008. Lo siento, no hay sintaxis #rrggbb que yo sepa. Juega con los números: puedes lavar con blanco, sombrear con gris, con lo que quieras diluir.

OK, entonces haces un rectángulo en gris semitransparente (o cualquier color) y lo colocas encima de tu imagen, tal vez con posición: absoluta y un índice z mayor que cero, y lo pones justo antes de tu imagen y el valor predeterminado la ubicación del rectángulo será la misma esquina superior izquierda de su imagen. Deberia trabajar.

Teniendo en cuenta filter: expression es una extensión de Microsoft para CSS, por lo que solo funcionará en Internet Explorer. Si desea atenuarlo, le recomendaría que configure su opacidad al 50% con un poco de javascript.

http://lyxus.net/mv sería un buen lugar para comenzar, porque discute un script de opacidad que funciona con Firefox, Safari, KHTML, Internet Explorer y navegadores compatibles con CSS3.

También es posible que desee darle un borde gris.