Blend Modes, Filter Effects, and Masking 227The default value of background-blend-mode is normal, which leaves the
background layer unblended.
Blending an Image and a Color
The simplest way to show how background blend modes work is to blend a
background image with a background color. The following listing has an
element with a background image and color applied and is set to use the
Screen blend mode:
E {
background: url('foo.png') #f00;
background-blend-mode: screen;
}
Figure 18-1 shows the result of this and other blend modes. Image (A) at
top left has no blend mode applied and is provided as a reference. The other
images each have a different blend mode keyword applied, namely screen (B),
multiply (C), and overlay (D). (Note that in this case the Overlay mode just
puts a solid color over the image, which is far from ideal; Overlay blend
modes are much more useful when blending two images.)
Figure 18-1: Comparing different blend modes applied to a source image
Blending Two Images
In addition to blending a background image layer with a color layer, you
can also blend a background image layer with other background image
layers. To do so, apply multiple background images (as discussed in
Chapter 8) and then set the blend mode as before:
E {
background-color: transparent;
background-image: url('foo.png'), url('bar.png');
background-blend-mode: multiply;
}