Gris hacia fuera la imagen con CSS?

Utilice la propiedad 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 se puede encontrar aquí: http://blog.nmsdvid.com/css-filter-property /

Su aquí:

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

Css Gray:

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

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

Edit: IE10+ no soporta filtros DX como IE9 y anteriores, ni soporta una versión prefijada del filtro de escala de grises. Puede arreglarlo, use una de cada dos soluciones a continuación:

1. Establezca IE10 + para renderizar usando el modo estándar IE9 usando el siguiente elemento meta 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 internet explorer 10 - ¿cómo aplicar el filtro escala de grises?

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

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

Mejor para soportar 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 te permite establecer el color del fondo. Si no quieres usar float, es posible que debas configurar el ancho y el alto 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>

Puede usar rgba() en css para definir un color en lugar de rgb(). Así: 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 se muestran hasta el 30%. CSS3 pero ha trabajado 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 así que haces un rectángulo en gris semitransparente (o de cualquier color) y lo pones en la parte superior de la imagen, tal vez con posición:absoluta y un índice z superior a cero, y lo pones justo antes de la imagen y la ubicación predeterminada para el rectángulo será la misma esquina superior izquierda de la imagen. Debería funcionar.

Considerando filter:expression es una extensión de Microsoft a CSS, por lo que solo funcionará en Internet Explorer. Si quieres gris, te recomiendo que establezcas su opacidad al 50% usando un poco de javascript.

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

Es posible que también desee darle un borde gris.