Blend Modes, Filter Effects, and Masking 229
Figure 18-3: Applying multiple blend modes in different combinations
mix-blend-mode
Although blending background layers is undoubtedly useful, the real power
lies in blending one element with another. In CSS3, you do this with the
mix-blend-mode property. When applied to an element, this property blends
the content of the element with the content and background of any ele-
ments that are directly behind it on the screen.
To understand how this differs from background-blend-mode, let’s see a
quick example. In the following listing, I apply a background image to ele-
ment E and the Multiply blend mode to element F, nested inside E:
E { background-image: url('foo.png'); }
F { mix-blend-mode: multiply; }
Figure 18-4 shows the result, along with other blend modes for compar-
ison. The element at top left (A) has no blend mode applied and is used as
a reference; the remaining three each have blend mode keywords applied:
screen (B), multiply (C), and overlay (D).
Figure 18-4: Different blend modes applied to the text element, mixed with the back-
ground of its parent
a
C
B
d
