Design comparison
Solution retrospective
I modified the root image to make it appear in purple, as I couldn't find a simple way to overlay the original image with this color. If you have any suggestions for semantic or simpler code, please comment.
Community feedback
- @danielmrz-devPosted 10 months ago
Fala @AlyssonDemari!
Seu projeto ficou ótimo!
Também tive dificuldade com essa coloração da imagem quando fiz esse projeto, mas acabei conseguindo assim:
.image { background-image: linear-gradient(0deg, #7210af9c, #7210af9c), url('images/image-header-mobile.jpg'); background-size: cover; height: 240px; }
Existe também uma outra opção usando uma propriedade chamada background-blend-mode, mas confesso que não sei utilizá-la muito bem. Estou mencionando pois talvez você queira pesquisar sobre. 😊
Espero que ajude!
Fora isso, seu projeto ficou fantástico!
Marked as helpful0@AlyssonDemariPosted 10 months ago@danielmrz-dev
Não sabia que isso era possível, fiz uns testes aqui e funcionou muito bem. Não consegui usar o background-blend-mode, achei mais complicado, mas o seu jeito já está anotado e quem sabe use em um projeto futuro.
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord