una para imagenes imagen estilo efectos efecto decolorar darle con como color cambiar brillo css css3

imagenes - efectos para background css



Cómo disminuir el brillo de la imagen en CSS (10)

Con CSS3 podemos ajustar fácilmente una imagen. Pero recuerda que esto no cambia la imagen. Solo muestra la imagen ajustada.

Vea el siguiente código para más detalles.

Para hacer una imagen gris:

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

Para dar un aspecto sepia:

img { -webkit-filter: sepia(100%); -moz-filter: sepia(100%); }

Para ajustar el brillo:

img { -webkit-filter: brightness(50%); -moz-filter: brightness(50%); }

Para ajustar el contraste:

img { -webkit-filter: contrast(200%); -moz-filter: contrast(200%); }

Para desenfocar una imagen:

img { -webkit-filter: blur(10px); -moz-filter: blur(10px); }

Quiero disminuir el brillo de la imagen en CSS. Busqué mucho pero todo lo que tengo es acerca de cómo cambiar la opacidad, pero eso hace que la imagen sea más brillante. Alguien puede ayudarme ?

En resumen, coloque negro detrás de la imagen y baje la opacidad. Puede hacer esto envolviendo la imagen dentro de un div y luego bajando la opacidad de la imagen.

Por ejemplo:

<!DOCTYPE html> <style> .img-wrap { background: black; display: inline-block; line-height: 0; } .img-wrap > img { opacity: 0.8; } </style> <div class="img-wrap"> <img src="http://mikecane.files.wordpress.com/2007/03/kitten.jpg" /> </div>

Here hay un JSFiddle.

La característica que estás buscando es filter . Es capaz de hacer una variedad de efectos de imagen, incluido el brillo:

#myimage { filter: brightness(50%); }

Puede encontrar un artículo útil al respecto aquí: http://www.html5rocks.com/en/tutorials/filters/understanding-css/

Otro: http://davidwalsh.name/css-filters

Y lo más importante, las especificaciones W3C: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html

Tenga en cuenta que esto es algo que recientemente entró en CSS como característica. Está disponible, pero una gran cantidad de navegadores no lo admitirán aún, y aquellos que sí lo admitan requerirán un prefijo de proveedor (es decir, -webkit-filter: -moz-filter , etc.).

También es posible hacer efectos de filtro como este usando SVG. El soporte SVG para estos efectos está bien establecido y es ampliamente compatible (las especificaciones de filtro CSS se han tomado de las especificaciones SVG existentes)

También tenga en cuenta que esto no debe confundirse con el estilo de filter patentado disponible en versiones anteriores de IE (aunque puedo predecir un problema con el conflicto de espacio de nombre cuando el nuevo estilo deja de usar el prefijo de proveedor).

Si nada de eso le resulta útil, puede seguir utilizando la función de opacity existente, pero no de la manera en que está pensando: simplemente cree un elemento nuevo con un color oscuro sólido, colóquelo sobre su imagen y descolore usando opacity El efecto será de la imagen detrás de oscurecerse.

Espero que ayude.

Me gusta

.classname { opacity: 0.5; }

OP quiere disminuir el brillo, no aumentarlo. La opacidad hace que la imagen se vea más brillante, no más oscura.

Puedes hacer esto al superponer un div negro sobre la imagen y establecer la opacidad de ese div.

<style> #container { position: relative; } div.overlay { opacity: .9; background-color: black; position: absolute; left: 0; top: 0; height: 256px; width: 256px; } </style> Normal:<br /> <img src="http://i.imgur.com/G8eyr.png"> <br /> Decreased brightness:<br /> <div id="container"> <div class="overlay"></div> <img src="http://i.imgur.com/G8eyr.png"> </div>

DEMO

Podrías usar:

filter: brightness(50%); -webkit-filter: brightness(50%); -moz-filter: brightness(50%); -o-filter: brightness(50%); -ms-filter: brightness(50%);

Puede usar filtros css, a continuación y ejemplos para el kit web. Por favor mira este ejemplo: http://jsfiddle.net/m9sjdbx6/4/

img { -webkit-filter: brightness(0.2);}

intente esto si necesita convertir una imagen negra en blanco:

.classname{ filter: brightness(0) invert(1); }