Linear Gradient não funciona | HTML e CSS

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

por Isa Oliveira

| 35.4k xp | 26 posts

Oie!

Minha dúvida é a seguinte:

Nesse código aqui do CSS, o linear gradient não está funcionando. Eu queria saber o que eu fiz de errado, porque até no VSCode a linha aparece vermelha. Mas no momento não estou conseguindo identificar, se é um espaço, uma letra, algo assim, porque na maioria das vezes é :/

Você pode me ajudar? Por favor?

Segue código:

.services__card {
    margin: 3rem;
    height: 525px;
    width: 400px;
    border-radius: 4px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0)0%, rgba(17, 17, 17, 0.376)100%);
    background-image: url('../Images/button-challenge.png');
    background-size: cover;
    position: relative;
}

2 respostas

por Isa Oliveira

| 35.4k xp | 26 posts

04/04/2022

Obs: Mesmo se eu tirar a porcentagem, ele continua sem funcionar :(

.services__card {
    margin: 3rem;
    height: 525px;
    width: 400px;
    border-radius: 4px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(17, 17, 17, 0.8));
    background-image: url('../Images/button-challenge.png');
    background-size: cover;
    position: relative;
}

Não acho que ficou tão claro no post, mas a ideia é justamente fazer um gradiente mais escuro por cima da imagem

Obrigadinha ^^

solução!

por Renato Silveira Nunes

| 88.4k xp | 110 posts

Analista programador pleno

05/04/2022

Olá Isa.

Para conseguir este efeito a imagem precisa ser PNG com fundo transparente senão não vai aparecer a cor degradê.

Fiz o teste com seu CSS e consegui o degradê, sem a imagem ele apareceu.

Você pode fazer o teste para ver se é a imagem que não carregou:

comente a linha com o degradê no css e veja se aparece a imagem
descomente a linha do degradê e comente a linha da imagem para ver se aparece o degradê

Com este teste você vai conseguir descobrir qual das linhas precisa ajustar.

Abraço.