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;
}
Aí vc pode mexer nesse 0.2 pro valor q ficar melhor pra vc. Vai testando. Fala aqui se funciona!
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/
não consegui chegar a solução completa. mas uma dica é utilizar a propriedade opacity.
opacity recebe valores entre 0 e 1.
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;
}
Também tive essa dúvida!
Nossa, ficou muito bom 
!!