0

I have a navigational div (div A) running horizontally with a div (div B) z-indexed above it that will contain a cross fading series of background images using jquery to set background-image property every 5 seconds. However, I need the section in red to be "masked" out over the background image of the div while the blue sections need to be transparent through to the lower div (div A). The masking/clipping would be applied to and be the same no matter which background image is displayed.

Because the end user may upload new images to use as the cycling background image there wont be an ability to edit the images through an image editor to create the masking and transparency so....

Can this be accomplished through some combination of HTML 5 masking/clipping functions being applied to the background-images or containing div (div B)? If so can someone show me example where masking/clipping have both been applied to an image?

If not, can someone advise a different method other than image editing before upload?

sample of layout

DMSJax
  • 1,709
  • 4
  • 22
  • 35

1 Answers1

0

To clarify: You want every red pixel to become transparent?

Here's an explanation of how to do it and a Demo: http://jsfiddle.net/m1erickson/2oun9t1x/

  • draw the background image on the canvas.

  • make a "masking" image containing only the red pixels you want to use as a mask.

  • set compositing to 'destination-out' which will cause any existing pixels to be made transparent where they intersect new drawings: context.globalCompositeOperation='destination-out'.

  • draw the red image to "erase" the image only where it intersects those red pixels.

Background image (left) and Mask (right):

enter image description hereenter image description here

Background image masked using compositing:

enter image description here

markE
  • 102,905
  • 11
  • 164
  • 176