228 Chapter 18
Figure 18-2 shows examples of blending two images. Each image has
different blend mode keywords applied. From left to right, these are screen,
multiply, and overlay. (If you’re looking at the example files using a desk-
top browser, hover your mouse over the elements to show the two different
background images that I’ve used.)Figure 18-2: Blending multiple background image layersNotice that I’ve set a transparent background color on the element. If I
hadn’t, the multiply keyword would have made the lower background image
layer blend with the background color and then blend with the other image
layer, creating a different effect than what I intended.Multiple Blend Modes
Since you can add multiple background images to an element, it follows
that you can apply a blend mode to each layer. To do so, you need only list
the required blend modes in a comma-separated list of values.
In the following code, the element has three background layers: two
images and a color. I’ve applied two blend mode keywords: Multiply mode
will be used to blend the background color with foo.png; the result will be
blended with bar.png using the Screen blend mode.E {
background-color: #f00;
background-image: url('foo.png'), url('bar.png');
background-blend-mode: multiply, screen;
}noTe As with the other multiple background properties, having fewer values on the
background-blend-mode property than there are background layers will make the
value list loop.Varying the blend modes can produce dramatically different results.
For example, Figure 18-3 shows a number of combinations applied to dif-
ferent elements with identical background layers. The element on the left
uses the Screen mode on the top image layer and Multiply mode on the
lower; the element in the middle uses Multiply mode on the upper image
layer and Overlay on the lower; and on the right, Overlay mode is applied
on the upper and Screen on the lower. As you can see, the results are quite
different.