The CSS mask-image property controls element visibility using an image mask. 1. It uses an image's alpha channel—white shows content, black hides it, gray partially reveals it. 2. Apply it with mask-image: url('mask.png'), and adjust with mask-repeat, mask-position, and mask-size. 3. Common issues include missing transparency in the mask image, browser support requiring -webkit- prefixes, and incorrect sizing. 4. Masks can also use gradients for effects like fade-ins, and can be animated for transitions or hover effects.

Using the CSS mask-image property allows you to control the visibility of elements by masking parts of them with an image. It’s like having a stencil — only the parts of the element that align with the opaque areas of the mask will show through.

What mask-image does

The mask-image property lets you define an image (like a PNG or gradient) that acts as a mask over another element. The alpha channel of the mask image determines what parts of the element are visible: white shows content, black hides it, and gray tones partially reveal the content based on their opacity.

You can use it like this:

.element {
  mask-image: url('mask.png');
}

This is especially useful for creating interesting visual effects without needing extra images or complex HTML structures.

How to apply a basic mask

To get started with mask-image, follow these simple steps:

• Prepare your mask image: Use a PNG file with transparent or grayscale areas.
• Apply the mask using the mask-image property in your CSS.
• Adjust positioning and sizing with other related properties like mask-repeat, mask-position, and mask-size.

Here's a quick example:

.masked {
  width: 200px;
  height: 200px;
  background-color: red;
  mask-image: url('circle-mask.png');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

This would display a red square masked into a circle shape if the mask image is a white circle on a transparent background.

Common issues and how to fix them

Sometimes things don’t work the way you expect. Here are a few common gotchas:

• Mask not showing up? Make sure your mask image has transparency or varying levels of gray. A fully opaque image won't hide anything.
• Browser support: Most modern browsers support mask-image, but always test in multiple browsers. Safari might need -webkit- prefixes.
• Incorrect sizing or tiling: Use mask-size and mask-repeat to fine-tune how the mask appears over the element.

Also, keep in mind that the mask works based on luminance unless specified otherwise. So lighter areas show more of the element, darker ones hide it.

Combining with gradients and other effects

Instead of using an image, you can also create masks using gradients:

.masked {
  mask-image: linear-gradient(to right, black, white);
}

This kind of approach is great for fade-ins or soft transitions. You can layer multiple masks using commas, similar to how background images work.

And since masks can be animated just like backgrounds, they’re handy for hover effects or loading animations.

That’s the core of working with mask-image. Once you understand how the alpha channel affects visibility, it becomes a flexible tool for creative layouts.

The above is the detailed content of How to use the CSS `mask-image` property?. For more information, please follow other related articles on the PHP Chinese website!