From the course: CSS: Images

Unlock this course with a free trial

Join today to access over 22,400 courses taught by industry experts.

Mix-blend-mode

Mix-blend-mode

- [Instructor] Another way to alter the appearance of an image is using mix-blend-mode. Here you blend the image with whatever is positioned right behind it. So imagine you have an element with maybe a background color and then you have an image that sits inside that element. You can then apply mix-blend-mode to the image and make it blend with the image behind it. The example you see here on MDN web docs is a good one to illustrate what's going on. So in the example, they've set up an image. This is the Firefox, and then behind it, they have this orange square. Now blend-mode-normal is normal. So nothing is happening, there's no blending happening. But if we change it to blend-mode-multiply, what happens is the background color which is the color in the parent element, shines through the color of the top element. So there's blending happening. We can then switch to hard light and you see there's another blend effect…

Contents