¿Aparece la imagen con CSS?

Question

¿Cuál es la mejor forma (si existe) de hacer que una imagen aparezca "atenuada" con CSS (es decir, sin cargar una versión separada y atenuada de la imagen)?

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

Answer 1

¿Tiene que ser gris? Puede establecer la opacidad de la imagen más baja (para atenuarla). Alternativamente, puede crear una superposición <div> y configurarla para que sea gris (cambie la 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; 
  } 
  

Answer 2

He aquí un ejemplo que te permite establecer el color del fondo. Si no desea usar float, entonces puede necesitar configurar el ancho y 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> 

Answer 3

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

http://lyxus.net/mv sería un buen lugar para comenzar, porque se trata de una secuencia de comandos de opacidad que funciona con Firefox, Safari, KHTML, Internet Explorer y navegadores con capacidad CSS3.

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

Answer 4

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

Answer 5

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

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

Answer 6

Puede utilizar rgba() en CSS para definir un color en lugar de rgb(). De esta manera: style='background-color: rgba(128,128,128, 0.7);

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

OK, de modo que haga un rectángulo en gris semitransparente (o el color) y colóquelo sobre su imagen, tal vez con la posición: absoluta y un índice z superior a cero, y póngalo justo antes de su la imagen y la ubicación predeterminada para el rectángulo será la misma esquina superior izquierda de su imagen. Deberia trabajar.

Answer 7

utilizar 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 de navegador es un poco malo pero es 100% CSS. Un buen artículo acerca de la propiedad de filtro CSS3 se puede encontrar aquí: http://blog.nmsdvid.com/css-filter-property/

Answer 8

Su aquí:

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

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

Edit: IE10 + no es compatible con filtros DX como lo han hecho IE9 y versiones anteriores, ni admite una versión prefijada del filtro de escala de grises. Puede solucionarlo, utilice uno de cada dos soluciones siguientes:

1. Conjunto IE10 + para hacer uso de las normas de modo IE9 utilizando el siguiente elemento meta en la cabeza: <meta http-equiv="X-UA-Compatible" content="IE=9">
2. Usar una superposición SVG en IE10 para llevar a cabo la greyscaling internet explorer 10 - howto apply grayscale filter?