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
- [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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.