mix-blend-mode

One final, very visual, property I want to relate before we end this chapter is mix-blend-mode. This property lets you decide how you want one element to “blend” with the element it sits on top of.

Here are the possible blend modes: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, and luminosity.

Static images don’t really do this property justice, so I’d encourage you to open example_08-12 in a browser. We’re using that same image of Mars from the last example but setting it as a fixed background for the body element.

Then, we add some text on top that you can scroll to see mix-blend-mode in effect. In this example, we have used overlay, for no reason other than I thought it worked best. If you open the example along with your developer tools, you can cycle through the other possibilities. It’s perhaps redundant to...