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 me puede ayudar?Cómo disminuir el brillo de la imagen en CSS
La característica que está buscando es filter. Es capaz de hacer una serie de efectos de imagen, como el brillo:
#myimage {
filter: brightness(50%);
}
se puede encontrar un artículo útil sobre ello aquí: http://www.html5rocks.com/en/tutorials/filters/understanding-css/
Un otra: http://davidwalsh.name/css-filters
Y lo más importante, el W3C especificaciones: 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 ampliamente admitido (las especificaciones del filtro CSS se tomaron de las especificaciones SVG existentes)
También tenga en cuenta que esto no debe confundirse con el estilo propietario filter disponible en versiones anteriores de IE (aunque puedo predecir un problema con el conflicto del espacio de nombres cuando el nuevo estilo deja de usar el prefijo del proveedor).
Si nada de eso le resulta útil, puede seguir utilizando la función existente opacity, pero no de la forma en que piensa: simplemente cree un elemento nuevo con un color oscuro sólido, colóquelo sobre su imagen y atenuarlo usando opacity. El efecto será de la imagen detrás de oscurecerse.
Espero que ayude.
esta es la respuesta correcta –
En resumen, coloque negro detrás de la imagen, y bajar el opactiy. 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 es una jsFiddle.
que está funcionando muy bien ... muchas gracias – Shadi
OP quiere disminución brillo, no aumentarlo. La opacidad hace que la imagen se vea más brillante, no más oscura.
Puede 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>
1 para la idea. ..: P –
La opacidad no hace que nada sea más brillante o más oscuro. Cambia la transparencia del objeto. Si esto tiene el efecto de hacer que algo sea más brillante o más oscuro dependerá del color de fondo detrás del elemento que está cambiando la opacidad de. Al contrario de lo que dices, puedes hacer algo más oscuro aumentando la opacidad si lo pones sobre un fondo negro. Una imagen transparente del 99% sobre un fondo negro aparecerá casi negra. Por lo tanto, no entiendo por qué se requiere un div de superposición por separado. Puede simplemente configurarlo en un BG negro. Ejemplo: http://jsbin.com/isemec/1/edit – NickG
@NickG Dije que asumiendo fondo blanco. Lo que has hecho es lo mismo que mi código, solo pongo una superposición negra semitransparente en la parte superior de la imagen y tienes un fondo negro opaco con una imagen semitransparente en la parte superior. – sachleen
que puede usar:
filter: brightness(50%);
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
-o-filter: brightness(50%);
-ms-filter: brightness(50%);
Esta política de "vamos a lanzar prefijos por si acaso" es incorrecta. Primero, si Opera lo admite, no tendrá '-o-' (Opera usa Webkit/Blink ahora), segundo, Firefox saltará directamente al 'filtro' no prefijado, tercero, tendrá el orden incorrecto, sin prefijo debería ser la última, cuarta, sintaxis para IE '-ms-filter' es diferente (' progid: DXImageTransform', etc.), quinto, la sintaxis para Firefox es diferente y requiere SVG ([Ver documentos] (https: // desarrollador) .mozilla.org/es-US/docs/Web/CSS/filter # brightness())), sexto, las nuevas características no tienen prefijo porque los proveedores se dieron cuenta de cuán mala idea era –
@CamiloMartin, entonces usted debería haber proporcionado una respuesta más completa a esta pregunta, ya que todavía no se ha respondido por completo. –
-webkit-filter: brillo()/-webkit-filter: contrast() funciona. Esta es una respuesta adecuada para la pregunta. – Shilpa
Con CSS3 podemos ajustar fácilmente una imagen. Pero recuerda que esto no cambia la imagen. Solo muestra la imagen ajustada.
Consulte el siguiente código para obtener más detalles.
Haciendo gris imagen:
img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
}
para dar un aspecto de la 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);
}
No publique exactamente la misma respuesta a varias preguntas: o no es una buena opción para todas o las preguntas son duplicados que deben marcarse/cerrarse como tales. – kleopatra
Este sería un buen candidato para la respuesta correcta. –
Puede utilizar filtros CSS, por debajo y ejemplo para Web-kit. Mire este ejemplo: http://jsfiddle.net/m9sjdbx6/4/
img { -webkit-filter: brightness(0.2);}
Encontré esto hoy. Realmente me ayudó. http://www.propra.nl/playground/css_filters/
Todo lo que necesita es añadir esto a su estilo css .:
div {-webkit-filter: brightness(57%)}
-webkit-filter: brightness(0.50);
Tengo esta solución fría: https://jsfiddle.net/yLcd5z0h/
probar esto si necesita convertir una imagen negra en blanco:
.classname{
filter: brightness(0) invert(1);
}
puede usar la opacidad de atributo –
Lo usé pero aumenta el brillo ... – Shadi
la respuesta aceptada funciona bien, pero también hay un nuevo efecto de 'filtro 'estándar CSS que querrá conocer para el futuro . Ver mi respuesta – Spudley