226 Chapter 18
As browsers implemented SVG graphics effects, it became somewhat
of a no-brainer to also give other web technologies access to them. So, in
this chapter, you’ll learn about three features that make SVG’s graphical
potential available to CSS: blend modes, filter effects, and masking. These non-
destructive effects only alter the way images are displayed on the page;
they don’t modify the source images.noTe Many SVG effects involve variations of color, which are very difficult to portray in
black and white. I strongly encourage you to see examples of the effects yourself at
http://thebookofcss3.com/.Blend Modes
If you’ve used professional-grade image-editing software like Photoshop or
GIMP, you may already be familiar with blend modes. Blend modes are a
way to mix an image into a solid color or another image so the two appear
merged or blended.
Various blend modes are available, each of which blends images in dif-
ferent ways, according to various algorithms. The available modes in CSS
are defined in the Compositing and Blending Module (http://www.w3.org/
TR/compositing-1/). I can’t cover all of the modes in detail due to a lack of
space, so I’ll concentrate on three:
Screen In this mode, whites remain white, whereas black lets the back-
ground color show through. As a result of applying this mode, images
tend to become lighter.
Multiply This mode tends to produce darker images. Blacks remain
black, whereas whites let the background color pass through.
Overlay The Overlay mode strikes a balance between the Screen and
Multiply modes. Highlights and shadows are preserved, increasing
contrast.
The remaining blend modes are generally variations on these three.
You can read a full explanation of each in the spec or see a good visual
introduction on http://dev.opera.com/articles/getting-to-know-css-blend-modes/.background-blend-mode
The background-blend-mode property is used to blend the background layers
of an element; for example, you might use it to blend the background color
with the background image. This property works solely in the context of the
element: Only the background layers are blended; the element itself doesn’t
blend with any part of the page below it. The property requires as a value
the keyword of the blend mode you want to use, such as screen, multiply, or
overlay. For example, here’s how to apply the Multiply blend mode:E { background-blend-mode: multiply; }