O recurso que você está procurando é filter
. É capaz de fazer uma variedade de efeitos de imagem, incluindo brilho:
#myimage {
filter: brightness(50%);
}
Você pode encontrar um artigo útil sobre isso aqui: http://www.html5rocks.com/en/tutorials/filters/understanding-css/
Um outro: http://davidwalsh.name/css-filters
E o mais importante, as especificações W3C: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
Observe que isso é algo que só recentemente entrou no CSS como um recurso. Ele está disponível, mas um grande número de navegadores lá fora, não vai apoiá-lo ainda, e aqueles que fazem o apoio será necessário um prefixo de fornecedor (ou seja -webkit-filter:
, -moz-filter
, etc).
Também é possível fazer efeitos de filtro como esse usando SVG. O suporte SVG para esses efeitos é bem estabelecido e amplamente suportado (as especificações do filtro CSS foram retiradas das especificações SVG existentes)
Observe também que isso não deve ser confundido com o proprietário filter
estilo disponível nas versões antigas do IE (embora eu possa prever um problema com o conflito de namespace quando o novo estilo seu prefixo de fornecedor).
Se nada disso funcionar para você, você ainda pode usar o opacity
recurso existente , mas não da maneira que está pensando: simplesmente crie um novo elemento com uma cor escura sólida, coloque-o sobre a imagem e esmaeça usando opacity
. O efeito será o escurecimento da imagem por trás.
Finalmente, você pode verificar o suporte do navegador filter
aqui .