mask-image

You can also mask elements with images, from either an image source with transparency such as a PNG graphic, a linear-gradient, which we looked at earlier in this chapter, or an SVG mask element. You can read about all the possibilities afforded to us in the specification here: https://www.w3.org/TR/css-masking-1/.

In the meantime, we will just look at a fairly straightforward example so you can appreciate the kind of effect that is possible and how the syntax works to achieve it.

Suppose we have an image. I have one that NASA took of Mars. I’d get one I took myself but, you know, it’s a bit of a jaunt.

Now, suppose we also have a PNG image that is transparent except for the word “MARS”. We can use this PNG as a mask on top of our image element.

This is what we see in the browser:

Figure 8.29: A mask image applied

Here is our relevant HTML:

<img
  src="mars.jpg"
  alt="An image of Mars from space...