Cómo disminuir el brillo de la imagen en CSS

105

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

css Shadi
fuente
puede usar opacidad de atributo
Satinder singh
Lo usé pero aumenta el brillo ...
Shadi
la respuesta aceptada funciona bien, pero también hay un nuevo filterefecto estándar CSS del que querrá estar al tanto en el futuro. Mira mi respuesta.
Spudley
1
@shady, ¿puede volver a revisar esta pregunta para marcar una de las respuestas que ofrecen soluciones que involucran filtros como correcta? La respuesta que marcó como correcta sería la forma de hacerlo, digamos en 2006.
Wes Modes

Respuestas:

175

La característica que está buscando es filter. Es capaz de realizar 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 del W3C: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html

Tenga en cuenta que esto es algo que se ha incorporado recientemente a CSS como característica. Está disponible, pero un gran número de navegadores por ahí no va a apoyar, sin embargo, y los que sí apoyo que requerirá un prefijo de proveedor (es decir -webkit-filter:, -moz-filter, etc).

También es posible hacer efectos de filtro como este usando SVG. La compatibilidad con SVG para estos efectos está bien establecida y es ampliamente admitida (las especificaciones del filtro CSS se han tomado de las especificaciones SVG existentes)

También tenga en cuenta que esto no debe confundirse con el filterestilo propietario disponible en las versiones antiguas de IE (aunque puedo predecir un problema con el conflicto de espacios de nombres cuando el nuevo estilo elimina su prefijo de proveedor).

Si nada de eso funciona para usted, aún puede usar la opacityfunción existente , pero no de la forma en que está pensando: simplemente cree un nuevo elemento con un color oscuro sólido, colóquelo encima de su imagen y difumínelo usando opacity. El efecto será el oscurecimiento de la imagen detrás.

Finalmente, puede consultar el soporte del navegador filter aquí .

Spudley
fuente
32

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

Puede hacer esto superponiendo un div negro sobre la imagen y estableciendo 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>

MANIFESTACIÓN

Sachleen
fuente
24
La opacidad no hace que nada sea más brillante ni más oscuro. Cambia la transparencia del objeto. Si esto tiene o no el efecto de hacer algo más brillante o más oscuro, dependerá del color de fondo detrás del elemento al que le estás cambiando la opacidad. Al contrario de lo que dices, puedes hacer algo más oscuro aumentando la opacidad si lo pones sobre un fondo negro. Una imagen 99% transparente sobre un fondo negro aparecerá casi negra. Por lo tanto, no veo por qué se requiere un div de superposición separado. Puede configurarlo en un BG negro. Por ejemplo: jsbin.com/isemec/1/edit
NickG
@NickG Dije eso asumiendo fondo blanco. Lo que has hecho es lo mismo que mi código, solo que puse 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
17

En resumen, coloque el negro detrás de la imagen y baje la opacidad. Puede hacer esto envolviendo la imagen dentro de un div y luego reduciendo 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>

Aquí hay un JSFiddle.

JL235
fuente
15

Podrías usar:

filter: brightness(50%);
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
-o-filter: brightness(50%);
-ms-filter: brightness(50%);
Nahomy Atias
fuente
9
Esta política de "arrojemos prefijos por si acaso" es incorrecta. Primero, si Opera alguna vez lo admite, no lo hará -o-(Opera usa Webkit / Blink ahora), segundo, Firefox saltó directamente a no prefijado filter, tercero, tienes el orden incorrecto, no prefijado debería ser el último, cuarto, la sintaxis para IE -ms-filteres diferente ( progid:DXImageTransform, etc.), quinto, la sintaxis para Firefox es diferente y requiere SVG ( ver documentos ), sexto, no es probable que se prefijen nuevas funciones porque los proveedores se dieron cuenta de lo mala que era la idea
Camilo Martin
5
@CamiloMartin, entonces debería haber dado una respuesta más completa a esta pregunta ya que aún no se ha respondido por completo.
Wes Modes
-webkit-filter: brillo () / -webkit-filter: contrast () funciona. Esta es una respuesta adecuada para la pregunta.
Shilpa
puede usarlo en sass mixin como este: gist.github.com/johnferrie/3836468
Erez Lieberman
6

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.

Para convertir una imagen en gris:

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

Para darle 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);
  }
Raj Sharma
fuente
1
No publique exactamente la misma respuesta a varias preguntas: o no es una buena opción para todas o las preguntas son duplicadas que deben marcarse / cerrarse como tales.
kleopatra
2

Si tiene una imagen de fondo, puede hacer esto: Establezca un degradado rgba () en la imagen de fondo.

.img_container {
  float: left;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  border : 1px solid #fff;
}

.image_original {
  background: url(https://i.ibb.co/GkDXWYW/demo-img.jpg);
}

.image_brighness {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), /* the gradient on top, adjust color and opacity to your taste */
  url(https://i.ibb.co/GkDXWYW/demo-img.jpg);
}

.img_container p {
  color: #fff;
  font-size: 28px;
}
<div class="img_container image_original">
  <p>normal</p>
</div>
<div class="img_container image_brighness ">
  <p>less brightness</p>
</div>
Expandir fragmento

Sébastien Gicquel
fuente
excelente. Necesitaba una solución para oscurecer una imagen de fondo y todas las demás respuestas oscurecen todo el div.
nuander
0

intente esto si necesita convertir una imagen negra en blanca:

.classname{
    filter: brightness(0) invert(1);
}
Rizo
fuente
-3

Me gusta

.classname
{
 opacity: 0.5;
}
Satinder singh
fuente
gracias pero que aumentando el brillo no disminuyéndolo !!
Shadi
Depende del color de fondo.
apocalipsis
correcto @zgnilec, depende del color de fondo ... si lo pones en negro, el brillo de la imagen disminuirá
Shadi
esto no funciona para aumentar el brillo en más del 100%, la opacidad solo puede llegar hasta 1
Javis Perez
Como no hablaba inglés, en realidad quería buscar "opacidad" y de todos modos me propusieron esta respuesta. Incluso si esta respuesta no responde a la pregunta, es bueno saber que opacityaumenta el brillo. ;)