There may be instances where we prefer not to manipulate the image directly, but alter a background image instead. Similar effects are easy to achieve in static images within PhotoShop, but are less common on the Internet.

Thankfully, we can achieve the same effect using the background-blend mode within CSS – this has the effect of allowing us to merge two images together. Using background-blend mode (for which browser support is good within desktop browsers) removes the need to manually edit each photo, so if any are changed, the same effect can easily be applied to their replacements.

In the same vein as those filters we've already examined, we would apply the filters within CSS. We can then switch them on or off using jQuery at will. I won't revisit the jQuery code that would be required, as we've already seen it earlier in the chapter; suffice to say that we would apply the background-blend mode, using an example such as the following:

  <style>
    .blend...