Design comparison
Solution retrospective
Having a hard time getting the color filter for the image. It seems like the colors in the designs for text are different from the style guide for me. Maybe I need to add other css properties to get the colors to match?
Community feedback
- @AkoToSiJeromeEhPosted over 1 year ago
Hi! Great work out there! In my experience, I have use the CSS properties (mix-blend-mode: multiply;) or (background-blend-mode: multiply;) to be helpful in matching the color of the image overlay to the design reference. However, I notice you're using the image as a background-image and the background-blend-mode is the one that suits it best. That's all! Keep up the good work and happy coding!
.card-image {
background: var(--soft-violet) url(images/image-header-desktop.jpg) no-repeat;
background-size: cover;
opacity: 0.8; // you can adjust
background-blend-mode: multiply;
width: 550px;
height: auto;
}
Marked as helpful1@pertrai1Posted over 1 year ago@AkoToSiJeromeEh Great feedback. Thank you for taking the time to share with me.
0
Please log in to post a comment
Log in with GitHub
Join 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