Como faço para aplicar um backgound-image junto com um background-color, porem o background-color seria um pouco transparente para poder ver o backgound-image por baixo.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Como faço para aplicar um backgound-image junto com um background-color, porem o background-color seria um pouco transparente para poder ver o backgound-image por baixo.
Oi, Iago! Tudo bem?
Para aplicarmos um background-image junto com um background-color transparente, de forma que possamos ver a imagem de fundo, podemos usar as seguintes propriedades descritas no código abaixo:
div {
width: 100%;
height: 100%;
background-image: url('caminho/para/imagem.jpg');
background-size: cover;
background-color: rgba(255, 0, 0, 0.5); /* Cor de fundo com 50% de transparência */
background-blend-mode: overlay; /* Mistura a cor de fundo com a imagem */
}
No exemplo acima, o valor "rgba(255, 0, 0, 0.5)" define um background-color vermelho com 50% de transparência, o valor "url('caminho/para/imagem.jpg')" define o caminho para a imagem que será exibida por baixo do background-color e o background-blend-mode: overlay mescla a cor de fundo com a imagem, permitindo que a imagem apareça através da cor de fundo transparente.
Espero ter ajudado! Caso tenha ficado alguma dúvida, sinta-se à vontade em comunicar, estou à disposição!
Um forte abraço e bons estudos!