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.
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!