1

Estou tentando fazer um background para o body usando uma imagem e um linear-gradient, no carregamento o gradiente aparece por um instante, mas logo é substituído apenas pela imagem, como podem ver abaixo.

body {
    background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Lake_O_Hara_from_Yukness_Ledge_Alpine_Route.jpg/800px-Lake_O_Hara_from_Yukness_Ledge_Alpine_Route.jpg"),
    linear-gradient(to left, rgb(0,180,0), rgb(0,180,180));  
    background-size: cover;
}
<!DOCTYPE html>
<html>
  <body>
  </body>
</html>

Por quê isso acontece?

1 Resposta 1

3

Tem dois problemas ai.

O primeiro, que não é exatamente um problema é que a imagem está por cima do linear-gradiente, e não o linear-gradiente que está por cima da imagem.

O segundo é que vc está usando rgb() e deveria ser rgba() no gradiente, assim vc consegue colocar a opacidade como quiser.

Ex: rgba(0,0,0,0.5), o "A" é o canal Alpha e ele controla a transparecia da cor, no exemplo que dei é um preto com 50% de opacidade.

Veja como ficou seu código depois do ajuste:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    background: linear-gradient(to left, rgba(0,180,0,0.5), rgba(0,180,180,0.5)), url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Lake_O_Hara_from_Yukness_Ledge_Alpine_Route.jpg/800px-Lake_O_Hara_from_Yukness_Ledge_Alpine_Route.jpg");  
    background-size: cover;
}
<!DOCTYPE html>
<html>
<body>
    
</body>
</html>

4
  • Funcionou, muito obrigado, porém agora surgiu outra dúvida por causa do rgba, vi em um exemplo assim, body { background: url('imagens/capa.png'), url('imagens/ruido.png'), linear-gradient(50deg,#ff4169,#7c26f8); background-attachment: fixed; overflow-x: hidden; }, essa sobreposição é feita com o overflow? Pois as cores do linear-gradient estão em hexadecimal, e o gradiente esta em baixo da url da imagem.
    – Dobrychtop
    22/03/2018 às 18:37
  • 1
    Isso deve ser pq as imagens .PNG tb aceitam o Alpha Channel, ou seja vc tb pode por transparência nelas no editor de imagens tipo Photoshop, depois exporta o .PNG translucido, só pode ser isso, ou então o elemento está todo com transparência. Só avaliando o modelo para ter certeza. Sobre o overflow ele não serve para criar transparência, ele serve para "esconder" o que estiver saindo da Div, tipo se o conteúdo do Filho estiver saindo de dentro do Pai vc coloca overflow no Pai para esconder o conteúdo do Filho que está pra fora entende.
    – hugocsl
    22/03/2018 às 18:52
  • Nossa, é exatamente isso, estava tentando resolver tudo no CSS, eu tinha feito com rgba, mas a imagem .jpg estava em cima, então escondia o gradiente da mesma forma, muito obrigado @hugocsl pela excelente explicação!
    – Dobrychtop
    22/03/2018 às 19:00
  • Isso ai, Tmj []´s
    – hugocsl
    22/03/2018 às 19:02

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .