Saudações amigos,
Gostaria de saber qual propriedade usar para usar linear gradiente em css usando imagens,
aqui tem um exemplo claro disso https://www.widepay.com
Linear Gradiente Usando Imagens
R
7 Respostas
R
1 like
Bem, eu ainda estou aprendendo CSS, então não sei se existe uma solução mais pratica para isso, porém como o dragiente está em uma imagem que você vai utilizar, eu acho que você pode simplesmente colocar o gradiente através de um editor de imagem tipo photoshop, é bem fácil, você só vai precisar utilizar uma label com o gradiente por tras e ajustar o nível de opacidade que você quiser.
É uma idéia.
E
1 like
Pode utilizar background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.3));
Veja neste tutorial e aplique em uma imagem.
https://tableless.com.br/como-usar-gradient-no-css-de-forma-consciente/
Vai testando até chegar no ponto que preferir.
A idéia de usar Photoshop também é interessante. Já adicionar a imagem pronta e renderizar.
R
Quer dizer que eu posso por exemplo, colocar uma classe em uma imagem, e no CSS usar essa classe para colocar o background-image: linear…?
E
1 like
Tipo isso
??
R
Hahahaha, exatamente isso, muito mais fácil. Vou até utilizar aqui pra fixar na memória. rsrsrs
Acho que dá pra mudar pra [RESOLVIDO] já
E
Também acho que podemos fechar.
@RafaSmith pode marcar o comentário como Resolução e atribuir [RESOLVIDO] no título?
R
Solucao aceita
Consegui fazer com desta maneira
#tag{background: linear-gradient(-125deg, #cccccc 12%, transparent 100%), url("…/img/laptop.jpeg");
Criado 18 de outubro de 2017
Ultima resposta 20 de out. de 2017
Respostas 7
Participantes 3
Alura POO: o que é programação orientada a objetos? Aprenda os conceitos básicos da programação orientada a objetos, como classes, objetos, herança, encapsulamento e polimorfismo, com exemplos.
Casa do Codigo JavaScript Assertivo: Testes e qualidade de codigo em... Por Gabriel Ramos — Casa do Codigo