CSS Master

Figure 10.5. The original background image (left) is modified (right) using background-blend-mode: multiply

Herewe’veusedthebackground-blend-modepropertytogivethebackground

photographapurplishtint.Forbackground-blend-modetowork,you’llhavetoset

oneormorebackgroundimagesorabackgroundimageandabackgroundcolor.To

createthebackgroundeffectinFigure10.5,you’dusethefollowingCSS:

.blend {

background: orchid url(images/snail.jpg);

background-blend-mode: multiply;

}

CurrentversionsofChrome,Firefox,Safari,andOperasupportthebackground-

blend-modeaswellasthemix-blend-modeproperty.Safari,however,lackssupport

forthehue,saturation,luminosity,andcolorfilters.

Blendmodesaffecthowthelayerswithinastackingcontextmaybevisuallycom-

bined.CSSFilters,ontheotherhand,altertherenderingoflayerswithoutcombining

them.WithCSSFilters,wecanblurobjects,changethemfromcolortograyscale

orsepiatone,modifytheirhue,orinverttheircolors.EachCSSfilterisafunction,

andwecanusethemaloneorinafilterlist,asshowninFigure10.6.

360 CSS Master