Como escurecer um fundo usando CSS?

100

Eu tenho um elemento com texto nele. Sempre que diminuo a opacidade, diminuo a opacidade de TODO o corpo. Existe alguma maneira de tornar o background-imagemais escuro e não todo o resto?

background-image:url('http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png');
TylerH
fonte

Respostas:

196

Basta adicionar este código ao css da sua imagem

 body{
 background:
        /* top, transparent black, faked with gradient */ 
        linear-gradient(
          rgba(0, 0, 0, 0.7), 
          rgba(0, 0, 0, 0.7)
        ),
        /* bottom, image */
        url(http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png);
    }

Referência: gradiente linear () - CSS | MDN

ATUALIZAÇÃO: Nem todos os navegadores suportam RGBa, então você deve ter uma 'cor de reserva'. Esta cor será mais provável ser sólido (totalmente opaco) ex: background:rgb(96, 96, 96). Consulte este blog para suporte ao navegador RGBa.

canela
fonte
Algum problema entre navegadores com isso?
Jon P
9
qual é a propriedade se quisermos especificar a imagem de fundo separadamente e esta?
Petruza de
2
@Petruza parece que não temos escolha a não ser usar esta sintaxe. Leia a referência : "Como <gradient> s pertencem ao tipo de dados <image>, eles só podem ser usados ​​onde <image> s podem ser usados. Por esta razão, linear-gradient () não funciona na cor de fundo e outras propriedades que usam o tipo de dados <color> "
Marco Panichi
18

Use um: after psuedo-element:

.overlay {
    position: relative;
    transition: all 1s;
}

.overlay:after {
    content: '\A';
    position: absolute;
    width: 100%; 
    height:100%;
    top:0; 
    left:0;
    background:rgba(0,0,0,0.5);
    opacity: 1;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}
.overlay:hover:after {
    opacity: 0;
}

Verifique minha caneta>

http://codepen.io/craigocurtis/pen/KzXYad

Craig O. Curtis
fonte
Bom, mas não funciona no Firefox 47.0.1 no Windows 10. Mas funciona com o IE. Você tem alguma correção para o firefox?
John Max
2
@JohnMax Firefox está funcionando bem agora. Só preciso esperar alguns anos.
Craig O. Curtis
9

Definir background-blend-modecomo darkenseria a maneira mais direta e curta de atingir o objetivo, no entanto, você deve definir um background-colorprimeiro para que o modo de mesclagem funcione.
Esta também é a melhor maneira se você precisar manipular os valores em javascript posteriormente.

background: rgba(0, 0, 0, .65) url('http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png');
background-blend-mode: darken;

Posso usar para mistura de fundo

Helena Bourmault
fonte
1
edge ou IE11 não é realmente um navegador
stackdave
6

Pode ser possível fazer isso com box-shadow

no entanto, não consigo aplicá-lo a uma imagem. Apenas em fundos de cor sólida

body {
  background: #131418;
  color: #999;
  text-align: center;
}
.mycooldiv {
  width: 400px;
  height: 300px;
  margin: 2% auto;
  border-radius: 100%;
}
.red {
  background: red
}
.blue {
  background: blue
}
.yellow {
  background: yellow
}
.green {
  background: green
}
#darken {
  box-shadow: inset 0px 0px 400px 110px rgba(0, 0, 0, .7);
  /*darkness level control - change the alpha value for the color for darken/ligheter effect */
}
Red
<div class="mycooldiv red"></div>
Darkened Red
<div class="mycooldiv red" id="darken"></div>
Blue
<div class="mycooldiv blue"></div>
Darkened Blue
<div class="mycooldiv blue" id="darken"></div>
Yellow
<div class="mycooldiv yellow"></div>
Darkened Yellow
<div class="mycooldiv yellow" id="darken"></div>
Green
<div class="mycooldiv green"></div>
Darkened Green
<div class="mycooldiv green" id="darken"></div>


fonte
2

Você pode usar um contêiner para seu plano de fundo, colocado como índice z absoluto e negativo: http://jsfiddle.net/2YW7g/

HTML

<div class="main">
    <div class="bg">         
    </div>
    Hello World!!!!
</div>

CSS

.main{
    width:400px;
    height:400px;
    position:relative;
    color:red;
    background-color:transparent;
    font-size:18px;
}
.main .bg{
    position:absolute;
      width:400px;
    height:400px;
    background-image:url("http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png");
    z-index:-1;
}

.main:hover .bg{
    opacity:0.5;
}
Yooz
fonte
2

Apenas para adicionar ao que já está aqui, use o seguinte:

background: -moz-linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7));
background: -webkit-linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7));
background: linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7));
filter: unquote("progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#b3000000',GradientType=0 )");

... para suporte de navegador cruzado de uma sobreposição de gradiente linear de 70%. Para iluminar a imagem, você pode alterar todos aqueles 0,0,0de para 255,255,255's. Se 70% é um pouco demais, vá em frente e mude o .7. E, para referência futura, verifique isso: http://www.colorzilla.com/gradient-editor/

Alex Price
fonte
1

quando você quiser brilho ou mais escuro da cor de fundo, você pode usar este código css

.brighter-span {
  filter: brightness(150%);
}

.darker-span {
  filter: brightness(50%);
}
Trung
fonte
Obrigado, eu não sabia sobre os filtros css . Caso ajude alguém, aqui está o status Posso usar (março de 2020).
Reed Dunkle
0

Para mim, a abordagem de filtro / gradiente não funcionou (talvez devido ao CSS existente), então usei o :beforetruque de pseudo estilo:

.eventBannerContainer {
    position: relative;
}
.eventBannerContainer:before {
    background-color: black;
    height: 100%;
    width: 100%;
    content: "";
    opacity: 0.5;
    position: absolute;
    display: block;
}
/* make any immediate child elements above our darkening mask */
.eventBannerContainer > * {
    position: relative;
}
Daniel Sokolowski
fonte
Como o padrão displaypara ::beforeé, inlineele não aceitará widthe height.
connexo
Obrigado @connexo, parece que perdi ao copiar os estilos relevantes.
Daniel Sokolowski