Submitted
@Abd-ur-Rahman03829
I can't understand how to change the color of image in css... Any suggestion about this would help me a lot... Thanks in Advance
@estebancasas9817
Posted
To change de color of an image you can use linear-gradient. Use a div with the class of img
CSS
.img { background-image: linear-gradient( to right bottom, rgba(126, 213, 111, 0.8), rgba(40, 180, 133, 0.8) ), url(./design/desktop-design-theme-1.jpg); // THE URL OF THE IMAGE
height: 100vh;
}
That's all.
Marked as helpful
@Geoff-Walker
Posted
Hi try setting the background color of the image div to the purple color and then use the following settings on the actual image:
opacity: lower than one so you can see the background
mix-blend-mode: multiply;
@SJ-Nosrat
Posted
@Geoff-Walker
Yes, great suggestion!
However, an <img src="your relative path here"> should be the child of the .img class as mix-blend-mode interacts in the following way: The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.
As mentioned in the MDN article here.
.img {
background-color: var(--Soft-violet);
}
img {
mix-blend-mode: multiply;
}
Notice in the above code, that .img is the class (as used by the OP) and img is the element added as a child to the .img class, respectively.
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
