This article shows a css technique for clipping the background of a block element to expose the background underneath it. The result looks something like this:
As you can see, I used the ness image (the little guy on top of the page) to cut out the semi-transparent white background to expose the striped gray background underneath.
The source for that is the following:
Evidently, this effect is achieved by CSS masks which I shall elaborate. CSS
masks are specified by multiple css properties starting with
the most important of which is the mask image specified by
An opaque pixel in the mask image tells the browser to render the corresponding
pixel of the element; a transparent pixel in the mask image has the opposite
effect. We can see this by using a transparent-to-opaque striped image as the
mask of our element with the ness image:
As you can see, the pixels of the ness image are rendered only where the corresponding pixel in the mask image is opaque (red).
So to achieve what we made in the beginning of the article, the mask image has to look like it’s opaque everywhere except the transparent cut out of the ness image in the center. In other words the mask image has to look something like this:
Since we only have the single ness image to work with, which by itself isn’t enough to recreate the mask image above, we use multiple images and compose them into one mask image. In the stylesheet, we specifiy two images to use as the mask. The first is the ness image, and the second is an image that is opaque everywhere (achieved by using a gradient with only red color stops).
The browser composes the final mask image by operating on those images right to
left. We start with the all red image since that’s the rightmost image specified
-webkit-mask-image property. We then compose the ness image on top of
this red image, following the composition directive
xor specified in the
-webkit-mask-composite property. The
xor composition directive tells the
browser that overlapping pixels between the source (ness) image and the
destination (red) image become fully transparent if they are both fully opaque.
The browser will carve out the ness image from the red image, leaving us with
the desired image mask.