[DÚVIDA CSS] Como deixar a imagem de background transparente?

Eu usei uma imagem como background em uma página html e quero deixá-la transparente para tornar a leitura do texto mais legível. Porém não consigo fazer isso. Já tentei criar classe, id, div, mas não consigo de jeito nenhum a transparência da imagem. Alguém sabe como fazer isso? Não entendo as explicações que encontro na internet…

Trecho do código CSS ao qual me refiro:

body {
    background: url(./pexels-mitchell-henderson-9741092.jpg);
    background-size:cover;
}
6 Likes
  • Coloca a imagem como background-image
  • Cria um background-color: rgba(0, 0, 0, 0.2).
  • Cria um background-blend-mode: multiply

Aí vc pode mexer nesse 0.2 pro valor q ficar melhor pra vc. Vai testando. Fala aqui se funciona!

7 Likes

Oi Cristiane, eu estava tendo o mesmo problema com o meu. Uma colega nossa no slack me deu a dica de criar uma máscara escura por cima da imagem. Segue o CSS que acabei utilizando:

body {
height: 100vh;
background: url(imagens/bg.jpg) no-repeat center center fixed;
background-color: rgba(0, 0, 0,0.75);
background-blend-mode: overlay;
background-size: cover;
}

A função background-blend-mode (background-blend-mode - CSS | MDN) que faz o overlay da cor por cima da imagem. Espero que ajude com o seu problema.

Edit: Caso queira ver meu resultado https://jorgesa.netlify.app/

4 Likes

não consegui chegar a solução completa. mas uma dica é utilizar a propriedade opacity.

opacity recebe valores entre 0 e 1.

1 Like

Oi gente. Eu consegui resolver o problema usando o código abaixo como dica do pessoal do slack. Mas agradeço muito pelas sugestões de soluções que vocês deixaram!

body::after {
    content: "";
    background: url(./pexels-nick-collins-1293120.jpg) no-repeat center center fixed;
    background-size:cover;
    opacity: 0.80;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;   
  }
5 Likes

Também tive essa dúvida!

1 Like

Nossa, ficou muito bom :clap: :clap:!!

1 Like