para - Convertir una imagen a escala de grises en HTML/CSS

oscurecer imagen css

Question

¿Hay una forma sencilla de mostrar un mapa de bits de color en escala de grises solo con HTML/CSS ?

No necesita ser compatible con IE (y me imagino que no lo será): si funciona en FF3 y / o Sf3, eso es suficiente para mí.

Sé que puedo hacerlo con SVG y Canvas, pero eso parece mucho trabajo ahora.

¿Hay una manera de hacer que una persona verdaderamente perezosa haga esto?

Answer 1

Acabo de tener el mismo problema hoy. Inicialmente usé la solución SalmanPK, pero descubrí que el efecto difiere entre FF y otros navegadores. Esto se debe a que la matriz de conversión funciona en la luminosidad, no solo en la luminosidad, como los filtros en Chrome / IE. Para mi sorpresa, descubrí que una solución alternativa y más simple en SVG también funciona en FF4 + y produce mejores resultados:

<svg xmlns="http://www.w3.org/2000/svg">
<filter id="desaturate">
<feColorMatrix type="saturate" values="0"/>
</filter>
</svg>

Con css:

img {
filter: url(filters.svg#desaturate); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}

Una advertencia más es que IE10 ya no admite "filter: grey:" en el modo compatible con los estándares, por lo que necesita un cambio de modo de compatibilidad en los encabezados para funcionar:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

Answer 2

Aquí hay una mezcla para MENOS que te permitirá elegir cualquier opacidad. Rellene las variables para CSS simple en diferentes porcentajes.

Una sugerencia clara aquí , usa el tipo de saturación para la matriz, por lo que no necesita hacer nada sofisticado para cambiar el porcentaje.

.saturate(@value:0) {
@percent: percentage(@value);
filter: url("data:image/svg+xml;utf8,<svg%20xmlns=''http://www.w3.org/2000/svg''><filter%20id=''grayscale''><feColorMatrix%20type=''saturate''%20values=''@value''/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: grayscale(@percent); /* Current draft standard */
-webkit-filter: grayscale(@percent); /* New WebKit */
-moz-filter: grayscale(@percent);
-ms-filter: grayscale(@percent);
-o-filter: grayscale(@percent);
}

Entonces úsalo:

img.desaturate {
transition: all 0.2s linear;
.saturate(0);
&:hover {
.saturate(1);
}
}

Answer 3

Basado en la respuesta de robertc :

Para obtener una conversión adecuada de una imagen en color a una imagen en escala de grises en lugar de usar una matriz como esta:

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

Deberías usar una matriz de conversión como esta:

0.299 0.299 0.299 0
0.587 0.587 0.587 0
0.112 0.112 0.112 0
0 0 0 1

Esto debería funcionar bien para todos los tipos de imágenes basadas en el modelo RGBA (rojo-verde-azul-alfa).

Para obtener más información sobre por qué debería usar la matriz, publiqué con mayor probabilidad que el único cheque de Robert en los siguientes enlaces:

• Las señales de luminancia y diferencia de color.
• La respuesta de Margus a la pregunta: "greyscalevalue in colorvalue" @ parte: Edit 2: @Hans Passant
• Charles A. Bouman - Universidad de Purdue - TV analógica página 20 y 21
• Y aquí puedes encontrar algunos códigos C # y VB.

Answer 4

Como complemento de las respuestas de otros, es posible desaturar una imagen a mitad de camino en FF sin los dolores de cabeza de la matriz de SVG:

<feColorMatrix type="saturate" values="$v" />

Donde $v está entre 0 y 1 . Es equivalente a filter:grayscale(50%); .

Ejemplo en vivo:

.desaturate {
filter: url("#desaturate");
-webkit-filter: grayscale(50%);
}
figcaption{
background: rgba(55, 55, 136, 1);
padding: 4px 98px 0 18px;
color: white;
display: inline-block;
border-top-left-radius: 8px;
border-top-right-radius: 100%;
font-family: "Helvetica";
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="desaturate">
<feColorMatrix type="saturate" values="0.4"/>
</filter>
</svg>
<figure>
<figcaption>Original</figcaption>
<img src="http://www.placecage.com/c/500/200"/>
</figure>
<figure>
<figcaption>Half grayed</figcaption>
<img class="desaturate" src="http://www.placecage.com/c/500/200"/>
</figure>

Referencia en MDN

Answer 5

De hecho, es más fácil hacerlo con IE si recuerdo correctamente el uso de una propiedad propietaria de CSS. Pruebe este FILTER: Gray de http://www.ssi-developer.net/css/visual-filters.shtml

El método de Ax simplemente hace que la imagen sea transparente y tiene un fondo negro detrás. Estoy seguro de que podrías argumentar que esto es en escala de grises.

Aunque no quisiste usar Javascript, creo que tendrás que usarlo. También puedes usar un lenguaje del lado del servidor para hacerlo.

Answer 6

En Internet Explorer utiliza la propiedad de filtro.

En webkit y Firefox, actualmente no hay forma de desatuarte una imagen únicamente con CSS. por lo tanto, tendrá que usar lienzo o SVG para una solución del lado del cliente.

Pero creo que usar SVG es más elegante. echa un vistazo a mi blog para la solución SVG que funciona tanto para Firefox como para webkit: http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html

Y estrictamente hablando, ya que SVG es HTML, la solución es simplemente html + css :-)

Answer 7

La forma más sencilla de lograr escala de grises con CSS exclusivamente es a través de la propiedad de filter .

img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}

La propiedad aún no es totalmente compatible y aún requiere la propiedad -webkit-filter para la asistencia en todos los navegadores.

Answer 8

No necesitas usar tantos prefijos para un uso completo, porque si eliges el prefijo para el viejo Firefox, no necesitas usar el prefijo para el nuevo Firefox.

Así que para uso completo, basta con usar este código:

img.grayscale {
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: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
img.grayscale.disabled {
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: none;
-webkit-filter: grayscale(0%);
}

Answer 9

No parece que sea posible (aún), incluso con CSS3 o propiedades propietarias -webkit- o -moz- CSS.

Sin embargo, encontré esta publicación de junio pasado que usaba filtros SVG en HTML. No está disponible en ningún navegador actual (la demo insinuaba una compilación WebKit personalizada), pero es muy impresionante como prueba de concepto.

Answer 10

Para Firefox no necesita crear un archivo filter.svg, puede usar el esquema de URI de datos .

Tomando el código css de la primera respuesta da:

filter: url("data:image/svg+xml;utf8,<svg%20xmlns=''http://www.w3.org/2000/svg''><filter%20id=''grayscale''><feColorMatrix%20type=''matrix''%20values=''0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200''/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: grayscale(100%); /* Current draft standard */
-webkit-filter: grayscale(100%); /* New WebKit */
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: gray; /* IE6+ */

Tenga cuidado de reemplazar la cadena "utf-8" por su codificación de archivo.

Este método debe ser más rápido que el otro porque el navegador no necesitará realizar una segunda solicitud HTTP.

Answer 11

Para la escala de grises como porcentaje en Firefox, use el filtro de saturación en su lugar: (busque ''saturar'')

filter: url("data:image/svg+xml;utf8,<svg xmlns=''http://www.w3.org/2000/svg''><filter id=''saturate''><feColorMatrix in=''SourceGraphic'' type=''saturate'' values=''0.2'' /></filter></svg>#saturate"

Answer 12

Para las personas que preguntan sobre el soporte omitido de IE10 + en otras respuestas, consulte esta pieza de CSS:

img.grayscale:hover {
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");
}
svg {
background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}
svg image:hover {
opacity: 0;
}

Aplicado en este marcado:

<!DOCTYPE HTML>
<html>
<head>
<title>Grayscaling in Internet Explorer 10+</title>
</head>
<body>
<p>IE10 with inline SVG</p>
<svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">
<defs>
<filter id="filtersPicture">
<feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
<feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
</filter>
</defs>
<image filter="url(&quot;#filtersPicture&quot;)" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" />
</svg>
</body>
</html>

Para obtener más demostraciones, visite la sección de gráficos CSS3 de IE testdrive y este antiguo blog de IE http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx

Answer 13

Prueba este plugin jquery. Aunque, esta no es una solución HTML y CSS pura, pero es una forma perezosa de lograr lo que desea. Puede personalizar su escala de grises para adaptarse mejor a su uso. Úsalo como sigue:

$("#myImageID").tancolor();

Hay una demo interactiva. Puedes jugar con eso.

Echa un vistazo a la documentación sobre el uso, es bastante simple. docs

Answer 14

Puede usar una de las funciones de jFunc: use la función "jFunc_CanvasFilterGrayscale" http://jfunc.com/jFunc-functions.aspx

Answer 15

Se agregó soporte para los filtros CSS nativos en webkit de la versión actual 19.0.1084.46.

así que -webkit-filter: escala de grises (1) funcionará y es más fácil que el enfoque SVG para webkit ...

Answer 16

Si está dispuesto a usar Javascript, puede usar un lienzo para convertir la imagen a escala de grises. Ya que Firefox y Safari admiten <canvas> , debería funcionar.

Así que busqué en Google "escala de grises del lienzo", y el primer resultado fue http://www.permadi.com/tutorial/jsCanvasGrayscale/index.html que parece funcionar.

Answer 17

Si puede usar JavaScript, entonces este script puede ser lo que está buscando. Funciona en varios navegadores y está funcionando bien para mí hasta ahora. No puedes usarlo con imágenes cargadas de un dominio diferente.

http://james.padolsey.com/demos/grayscale/

Answer 18

Si usted, o alguien más que enfrenta un problema similar en el futuro, está abierto a PHP. (Sé que dijiste HTML / CSS, pero quizás ya estés usando PHP en el backend) Aquí hay una solución PHP:

Lo obtuve de la biblioteca PHP GD y agregué alguna variable para automatizar el proceso ...

<?php
$img = @imagecreatefromgif("php.gif");
if ($img) $img_height = imagesy($img);
if ($img) $img_width = imagesx($img);
// Create image instances
$dest = imagecreatefromgif(''php.gif'');
$src = imagecreatefromgif(''php.gif'');
// Copy and merge - Gray = 20%
imagecopymergegray($dest, $src, 0, 0, 0, 0, $img_width, $img_height, 20);
// Output and free from memory
header(''Content-Type: image/gif'');
imagegif($dest);
imagedestroy($dest);
imagedestroy($src);
?>

Answer 19

Siguiendo con la respuesta de brillout.com , y también con Roman Nurik , y relajando un poco el requisito ''no SVG'', puedes desaturar las imágenes en Firefox usando solo un archivo SVG único y algo de CSS.

Su archivo SVG se verá así:

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg">
<filter id="desaturate">
<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>

Guárdelo como resources.svg, puede reutilizarse a partir de ahora para cualquier imagen que desee cambiar a escala de grises.

En su CSS usted hace referencia al filtro usando la propiedad de filter específica de Firefox:

.target {
filter: url(resources.svg#desaturate);
}

Agregue los de MS también si lo desea, aplique esa clase a cualquier imagen que desee convertir a escala de grises (funciona en Firefox> 3.5, IE8) .

edición : Aquí hay una bonita publicación de blog que describe el uso de la nueva propiedad de filter CSS3 en la respuesta de SalmanPK en concierto con el enfoque SVG descrito aquí. Usando ese enfoque terminarías con algo como:

img.desaturate{
filter: gray; /* IE */
-webkit-filter: grayscale(1); /* Old WebKit */
-webkit-filter: grayscale(100%); /* New WebKit */
filter: url(resources.svg#desaturate); /* older Firefox */
filter: grayscale(100%); /* Current draft standard */
}

Más información de soporte del navegador aquí .

Answer 20

Tal vez asi te ayude

img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}

w3schools.org

Answer 21

Una nueva forma de hacerlo ha estado disponible desde hace algún tiempo en los navegadores modernos.

el modo de mezcla de fondo te permite obtener algunos efectos interesantes, y uno de ellos es la conversión a escala de grises

El valor de luminosidad , establecido sobre un fondo blanco, lo permite. (haz click para verlo en gris)

.test {
width: 300px;
height: 200px;
background: url("http://placekitten.com/1000/750"), white;
background-size: cover;
}
.test:hover {
background-blend-mode: luminosity;
}

<div class="test"></div>

La luminosidad se toma de la imagen, el color se toma del fondo. Como siempre es blanco, no hay color.

Pero permite mucho más.

Puedes animar la configuración del efecto 3 capas. La primera será la imagen, y la segunda será un degradado blanco-negro. Si aplica un modo de mezcla múltiple en esto, obtendrá un resultado blanco como antes en la parte blanca, pero la imagen original en la parte negra (multiplicar por blanco da blanco, multiplicar por negro no tiene efecto).

En la parte blanca del degradado, obtienes el mismo efecto que antes. En la parte negra del degradado, está fusionando la imagen sobre sí misma, y ​​el resultado es la imagen no modificada.

Ahora, todo lo que se necesita es mover el degradado para obtener este efecto dinámico: (desplácese para verlo en color)

div {
width: 600px;
height: 400px;
}
.test {
background: url("http://placekitten.com/1000/750"),
linear-gradient(0deg, white 33%, black 66%), url("http://placekitten.com/1000/750");
background-position: 0px 0px, 0px 0%, 0px 0px;
background-size: cover, 100% 300%, cover;
background-blend-mode: luminosity, multiply;
transition: all 2s;
}
.test:hover {
background-position: 0px 0px, 0px 66%, 0px 0px;
}

<div class="test"></div>

reference

matriz de compatibilidad

Answer 22

Una solución terrible pero viable: renderice la imagen utilizando un objeto Flash, que le ofrece todas las transformaciones posibles en Flash.

Si sus usuarios están usando navegadores de vanguardia y si Firefox 3.5 y Safari 4 lo admiten (no sé si lo harán / lo harán), podría ajustar el atributo de perfil de color CSS de la imagen, configurándolo en una escala de grises ICC URL del perfil. ¡Pero eso es mucho si!

Answer 23

be Una alternativa para un navegador más antiguo podría ser usar una máscara producida por pseudo-elementos o etiquetas en línea.

La posición absoluta sobre una imagen (o área de texto que no necesita hacer clic ni seleccionar) puede imitar los efectos de la escala de color, a través de rgba () o translucide png .

No dará una escala de color única, sino que sombreará el color fuera de rango.

prueba en el lápiz de código con 10 colores diferentes a través de un pseudo-elemento, el último es gris. http://codepen.io/gcyrillus/pen/nqpDd (recargar para cambiar a otra imagen)

Answer 24

El soporte para los filtros CSS ha aterrizado en Webkit. Así que ahora tenemos una solución de navegador cruzado.

img {
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}
/* Disable grayscale on hover */
img:hover {
-webkit-filter: grayscale(0);
filter: none;
}

<img src="http://lorempixel.com/400/200/">

¿Qué pasa con Internet Explorer 10?

Se puede utilizar un polyfill como el gray .

Answer 25

Actualización: convertí esto en un repositorio completo de GitHub, incluido el polyfill de JavaScript para IE10 e IE11: gray

Originalmente utilicé la respuesta de SalmanPK , pero luego creé la siguiente variación para eliminar la solicitud HTTP adicional requerida para el archivo SVG. El SVG en línea funciona en las versiones 10 y superiores de Firefox, y las versiones inferiores a 10 ya no representan ni el 1% del mercado global de navegadores.

Desde entonces, he mantenido la solución actualizada en esta publicación del blog , agregando soporte para la atenuación del color, soporte IE 10/11 con SVG y escala de grises parcial en la demostración.

img.grayscale {
/* Firefox 10+, Firefox on Android */
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");
/* IE 6-9 */
filter: gray;
/* Chrome 19+, Safari 6+, Safari 6+ iOS */
-webkit-filter: grayscale(100%);
}
img.grayscale.disabled {
filter: none;
-webkit-filter: grayscale(0%);
}

Answer 26

img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}