para - ¿Imagen gris con CSS?

img style html

Question

¿Cuál es la mejor manera (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

Aquí hay un ejemplo que le 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 2

Es mejor para 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 3

Puede usar 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%, por lo que las cosas que están detrás solo se muestran en un 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, haga un rectángulo en gris semitransparente (o cualquier 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 imagen y el valor predeterminado la ubicación del rectángulo será la misma esquina superior izquierda de su imagen. Deberia trabajar.

Answer 4

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

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

Answer 5

Teniendo en cuenta filter: expression es una extensión de Microsoft para 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, ya que analiza una secuencia de comandos de opacidad que funciona con Firefox, Safari, KHTML, Internet Explorer y navegadores compatibles con CSS3.

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

Answer 6

Tu aqui:

<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

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

1. Configure IE10 + para renderizar usando el modo de estándares IE9 usando el siguiente elemento meta en el encabezado: <meta http-equiv="X-UA-Compatible" content="IE=9">
2. Use una superposición SVG en IE10 para realizar el uso de greyscaling internet explorer 10: ¿cómo aplicar el filtro de escala de grises?

Answer 7

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 del filtro CSS3 que puede encontrar aquí: http://blog.nmsdvid.com/css-filter-property/

Answer 8

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