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 filter
estilo 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 opacity
funció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í .