UPDATE 2/26

The sample CodePen has now been prefixed with a vendor prefix and a compatibility tip in the body. Thank you in the comments section.

I recently studied the hollowing effect.

background-clip: text

The background is cropped to the foreground of the text. I first saw this use in CSS-Tricks: it’s used everywhere on CSS-Tricks.

In this way, it is no longer difficult to do a simple image background hollowing effect. There are only a few lines of critical code.

.wrapper {
  / *... * /
  background-image: url("/path/to/your/image");
  -webkit-background-clip: text;  /* Chrome users note that the -webkit prefix */
  background-clip: text;
  color: transparent;             /* Text is set to transparent */
}
Copy the code

Just a few lines, and you can make a big difference visually. Before and after comparison:

Also, here’s a more useful Demo than the one above

Compatibility Tips

In addition to Firefox and Edge, all browsers need to match the vendor prefix:

  -webkit-background-clip: text;
Copy the code

Since background-clip belongs to the “background” family, it naturally deals with images and gradients. However, we do not always hollow out pictures, gradient this kind of bar. What if we wanted to hollow out video, text, or even more complex DOM elements?

Cut to the chase: CSSmaskattribute

This is probably the most obvious way to do it. After all, there’s a “mask” in the name. Who could ignore that?

The CSS Mask -* series of properties are defined in CSS Masking Module Level 1. The specification also defines the well-known clip and Clip-path properties. In other words, the CSS module includes masks and clipping.

The first example

Although this is a new property, it is not difficult to set the mask property. Here is our first example.

<div class="masked" />
Copy the code

.masked {
  height: 100px;
  width: 100px;
  background: linear-gradient(red, orange, yellow, lightgreen, blue, purple, red);
  -webkit-mask: url("https://github.githubassets.com/pinned-octocat.svg");
  mask: url("https://github.githubassets.com/pinned-octocat.svg");
}
Copy the code

Here’s what it looks like.

The usage above is fairly simple, we specify a mask parameter whose value is an SVG image stolen from GitHub. The colorful gradient was cut out to mask the famous cat.

Compatibility Tips

Mask Module is still in Candidate Recommendation status, and many browsers now require vendor prefixes. Chrome users and Edge users please add -webkit prefix, such as -webkit-mask:… ; . Firefox can be used directly.

Can I Use Can I Use -webkit, Mask support browser is still quite a few.

For ease of reading, the following code does not use prefixes.

Mask – * family

The mask attribute is actually an abbreviation of many masks -* :

mask-image
mask-repeat
mask-position
mask-clip
mask-origin
mask-size
-
mask-type
mask-composite
mask-mode
Copy the code

Is there any background-* visibility? Backgorund/border; backgorund/border; backgorund/border; backgorund/border; backgorund/border; While mask-* is only used on the mask layer – all the tricks used on the background can still be used in the mask world! For example, to achieve this effect:

.masked {
  height: / *... * /;
  width: / *... * /;
  background: / *... * /;
  /* Webkit kernel users please note to add the vendor prefix - Webkit */
  mask-image: url(https://github.githubassets.com/pinned-octocat.svg);
  mask-size: 5em;
  mask-position: center;
  /* If you are in a good mood, you can add an animation */
}
Copy the code

Further control the mask effect

As readers may have noticed, there are several unborn faces in the Mask-* family. This is understandable: mask is such a powerful feature, it is a pity to copy background-* completely.

mask-mode

Mask-mode specifies the mask mode.

Compatibility warning: Mask-mode is currently supported only by Firefox 53+.

Mask-type CSS property sets whether mask-image is used for a “brightness” mask or an “opacity” mask. Mask-mode: alaph uses opacity (that is, the ALaph channel) as the mask value, and mask-mode: luminance uses the brightness value as the mask value.

What is the mask value? Mask value indicates the extent to which masked elements are masked. The larger the mask value is, the masked area will be more inclined to be exposed. When the mask value is the largest, the area will be completely opaque. Here’s an example:

<div class="mode">ABCDEFG</div>
Copy the code

.mode {
  height: 200px;
  width: 300px;
  /* and more */
  mask-image: linear-gradient(to left, black, yellow);
  mask-mode: luminance; /* or alaph ? * /
}
Copy the code

Mask image on the left, Luminance in the middle and alaph on the right. The image here is opaque, so using a constant opaque image as a mask in Alaph mode results in no mask effect. However, the image changes in brightness, so the masked element under luminance shows a change in transparency.

Generally, luminance mode is a little slower, because the brightness value of each pixel needs to be calculated from the VALUES of the RGB three channels.

mask-composite

Specifies how to handle mask effects when multiple mask images are superimposed. The effect of some attribute values depends on the hierarchy of the mask-image.

Get a feel for this CodePen from MDN

So much for the knowledge of mask, more specific and more accurate explanation or to MDN.

Mixed mode

This is probably the most amazing way to do it. When working with Photoshop, you often see the term “hybrid mode.” I remember when I first started using Photoshop years ago, I wondered what “blend mode” was, which left me in awe of Photoshop. However, the “mixed mode” here is quite understandable.

The so-called “blending mode” is a method of calculating the final color value of pixels when the layers overlap. Each blend mode takes a foreground color value and a background color value (the top and bottom colors, respectively) as input, performs some calculations and outputs the final color value to be displayed on the screen. The final visible color is the result of blending mode calculations for each overlapping pixel in the layer. In plain English, blending mode determines what happens when one layer is superimposed on another.

In CSS, you can use mix-blending-mode to specify the blending mode.

There’s no such thing as “blend mode”, you might ask, so blending-mode defaults to None? Is not. In fact, the most common case in which the upper layer “blots out” the lower layer is also a blending mode called normal, which is essentially a blending mode that only preserves the foreground color value and completely abandons the background color value.

Here we will only discuss the blending mode used to achieve the hollowing effect — Screen. This blending mode has a feature that the foreground layer is black so that the final visible color is directly the color of the background layer, and the foreground layer is white so that the final visible color is directly white.

I believe you have not understood this and hollow out what relationship, here is an example to see.

Now we have a

We add the following CSS to the float box:

.logo {
    / *... . * /
    mix-blend-mode: screen;
}
Copy the code

It looks like this:

Go to this Demo and see the code and the effect

The gear icon has indeed become hollow. But why?

Let’s be clear about one thing: put the floating layer on top of the video. The floating layer is the “foreground” and the video is the “background”. Let’s look at the white part of the floating layer first, because if you put white on top of any color you get white, so the white part is retained; And because black is placed on top of any color you get the underlying color, so the black part is hollowed out.

However, this implementation is quite Hack, because only black and white are used here. If other colors are used as background-color of the floating layer, the result will not look like hollow out, so we still need to invite the mask family above to appear. However, for white background only, mix-blending-mode is a viable solution.