Como diminuir o brilho da imagem em CSS

106

Quero diminuir o brilho da imagem em CSS. Pesquisei muito, mas tudo o que tenho é como alterar a opacidade, mas isso torna a imagem mais brilhante. Alguém pode me ajudar ?

css Shadi
fonte
você pode usar o atributo opacidade
Satinder singh
Eu usei mas aumenta o brilho ...
Shadi
a resposta aceita funciona bem, mas há também um novo filterefeito padrão CSS do qual você vai querer estar ciente no futuro. Veja minha resposta.
Spudley de
1
@shady, você pode gentilmente revisitar esta questão para marcar uma das respostas que oferecem soluções envolvendo filtros como correta. A resposta que você marcou como correta seria a maneira de fazê-lo, digamos, em 2006.
Wes Modes

Respostas:

176

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 opacityrecurso 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 .

Spudley
fonte
32

OP quer diminuir brilho, não aumentá-lo. A opacidade torna a imagem mais clara, não mais escura.

Você pode fazer isso sobrepondo um div preto sobre a imagem e definindo a opacidade desse 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

sachleen
fonte
24
A opacidade não torna nada mais claro ou mais escuro. Ele muda a transparência do objeto. Se isso tem ou não o efeito de tornar algo mais claro ou mais escuro, dependerá da cor de fundo por trás do item do qual você está alterando a opacidade. Ao contrário do que você diz, você pode tornar algo mais escuro aumentando a opacidade se colocar sobre um fundo preto. Uma imagem 99% transparente em um fundo preto aparecerá quase preto. Portanto, não vejo por que uma div de sobreposição separada é necessária. Você pode apenas configurá-lo em um BG preto. Por exemplo: jsbin.com/isemec/1/edit
NickG
@NickG Eu disse isso assumindo um fundo branco. O que você fez é a mesma coisa que meu código, só que coloquei uma sobreposição preta semitransparente no topo da imagem e você tem um fundo preto opaco com uma imagem semitransparente no topo.
sachleen
17

Resumindo, coloque o preto atrás da imagem e diminua a opacidade. Você pode fazer isso envolvendo a imagem em um div e, em seguida, diminuindo a opacidade da imagem.

Por exemplo:

<!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>

Aqui está um JSFiddle.

JL235
fonte
15

Você pode usar:

filter: brightness(50%);
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
-o-filter: brightness(50%);
-ms-filter: brightness(50%);
Nahomy Atias
fonte
9
Essa política de "vamos lançar prefixos para o caso" está errada. Primeiro, se o Opera já o suportar, ele não terá -o-(o Opera usa Webkit / Blink agora), segundo, o Firefox saltou direto para o sem prefixo filter, terceiro, você tem a ordem errada, sem prefixo deve ser o último, quarto, a sintaxe do IE -ms-filteré diferente ( progid:DXImageTransform, etc), quinto, a sintaxe do Firefox é diferente e requer SVG ( veja a documentação ), sexto, é provável que os novos recursos não tenham um prefixo porque os fornecedores perceberam o quão ruim era uma ideia
Camilo Martin
5
@CamiloMartin, então você deveria ter dado uma resposta mais completa a esta pergunta, pois ainda não foi respondida completamente.
Wes Modes
-webkit-filter: brilho () / -webkit-filter: contrast () funciona. Esta é uma resposta adequada para a pergunta.
Shilpa
você pode usá-lo no mixin sass como este: gist.github.com/johnferrie/3836468
Erez Lieberman
6

Com CSS3 podemos ajustar facilmente uma imagem. Mas lembre-se de que isso não muda a imagem. Exibe apenas a imagem ajustada.

Veja o código a seguir para mais detalhes.

Para tornar uma imagem cinza:

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

Para dar uma aparência sépia:

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

Para ajustar o brilho:

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

Para ajustar o contraste:

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

Para desfocar uma imagem:

    img {
     -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
  }
Raj Sharma
fonte
1
Por favor, não poste exatamente a mesma resposta para várias perguntas: ou não é um bom ajuste para todas ou as perguntas são duplicatas que devem ser sinalizadas / fechadas como tal.
kleopatra
3

Eu encontrei isso hoje. Isso realmente me ajudou. http://www.propra.nl/playground/css_filters/

Tudo que você precisa é adicionar isso ao seu estilo css .:

div {-webkit-filter: brightness(57%)}
Espírito em movimento
fonte
2

Se você tem uma imagem de fundo, pode fazer o seguinte: Definir um gradiente rgba () na imagem de fundo.

.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 trecho

Sébastien Gicquel
fonte
excelente. Eu precisava de uma solução para escurecer uma imagem de fundo e todas as outras respostas escurecerem todo o div.
Nuander
1

Você pode usar filtros css, abaixo e exemplo para web-kit. veja este exemplo: http://jsfiddle.net/m9sjdbx6/4/

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

tente fazer isso se precisar converter a imagem preta em branco:

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

Gostar

.classname
{
 opacity: 0.5;
}
Satinder Singh
fonte
obrigado mas que aumentando o brilho não diminuindo !!
Shadi
Depende da cor de fundo.
apocalipse de
certo @zgnilec depende da cor de fundo ... se você colocá-lo em preto o brilho da imagem diminuirá
Shadi
isso não funciona para aumentar o brilho em mais de 100%, a opacidade só pode chegar até 1
Javis Perez
Por não ser um falante de inglês, na verdade eu queria pesquisar por "opacidade" e, de qualquer forma, propus essa resposta. Mesmo que esta resposta não responda à pergunta, é bom saber que opacityaumenta o brilho. ;)