Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Linear Gradient não funciona

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

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

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:

  1. comente a linha com o degradê no css e veja se aparece a imagem
  2. 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.