0

Estou tentando fazer o efeito linear gradient para deixar a parte de baixo da imagem com "degradê" preto, mas quando eu coloco o comando, independente da cor que eu uso, ele fica branco, segue código para visualização:

        -webkit-mask-image: linear-gradient(to top, transparent 1%, #000000 30%);

A imagem fica deste jeito:
inserir a descrição da imagem aqui

Eu gostaria que a parte de baixo fosse preta, pra seguir o fluxo da seção logo abaixo a imagem, mas não importa a cor que eu insiro no código (no caso #000000), ela sempre fica branca

1 Resposta 1

1

A propriedade -webkit-mask-image na verdade cria uma gradiente de opacidade como vc pode ver nessa questão Com CSS é possível mesclar duas Imagens?

Então o branco que vc está vendo na verdade é a cor de fundo da página.

inserir a descrição da imagem aqui

Uma das formas de corrigir isso é colocar a imagem dentro de uma div com o background black por exemplo.

body {background: red;}

img {
  -webkit-mask-image: linear-gradient(to top, transparent 1%, #000000 30%);
}

div {
  display: inline-block;
  background: black;
}
<img src="https://unsplash.it/200/200">

<div>
  <img src="https://unsplash.it/200/200">
</div>

3
  • muitissimo obrigado hugo!!!! Commented 27/01/2021 às 18:47
  • 1
    @EduardoKusdraFilho cara se a resposta te ajudou e resolveu considere marcar ela como aceita nesse ícone ✔︎ logo abaixo das setinhas ao lado da resposta :)
    – hugocsl
    Commented 27/01/2021 às 19:01
  • 1
    opa, coloquei aqui já! obrigado Commented 28/01/2021 às 11:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .