Introduction to CSS Masking
CSS Masking
The CSS mask-image
property is used to apply an image or SVG graphic as a mask over an element. It works by hiding parts of the element based on the alpha channel of the mask image.
As an example:
.element {
background-image: url("background-image.jpg");
mask-image: url("mask-image.svg");
mask-mode: alpha; /* Determines the blending mode */
mask-position: center; /* Sets the position of the mask */
mask-size: cover; /* Determines the size of the mask */
}
In this example:
- The
background-image
property sets the background image of the element, while themask-image
property sets the mask image to be applied. - The
mask-mode
property determines the blending mode of the mask and the element, whilemask-position
andmask-size
determine the position and size of the mask, respectively.
Use an Image as the Mask Layer
To use an image as the mask layer, you can follow these steps:
Open the image you want to use as a mask layer in an image editing software like Adobe Photoshop or GIMP.
Create a new layer above the image layer and fill it with the color or gradient you want to use as the background.
Drag the image layer onto the new layer to create a clipping mask.
In the Layers panel, click on the image layer to select it.
Click on the
"Add Layer Mask"
button at the bottom of the Layers panel to add a mask to the layer.In the Layers panel, make sure the mask is selected and choose
"Image"
from the drop-down menu in the Properties panel.Choose the image you want to use as the mask layer and adjust the settings as needed.
Use the brush tool to paint on the mask layer to reveal or hide parts of the image.
Save the image as a PNG or TIFF file to preserve the transparency of the mask layer.
By following these steps, you can use an image as a mask layer to create interesting and unique effects in your designs.
Example
<!DOCTYPE html>
<html>
<head>
<title>Image Mask Example</title>
<style>
.mask-image {
position: relative;
display: inline-block;
-webkit-mask-image: url("mask.png");
mask-image: url("mask.png");
mask-repeat: no-repeat;
mask-position: center;
mask-size: cover;
}
.mask-image img {
display: block;
max-width: 100%;
height: auto;
}
.mask-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2em;
color: white;
text-align: center;
text-shadow: 1px 1px 1px black;
z-index: 1;
}
</style>
</head>
<body>
<div class="mask-image">
<img src="image.jpg" alt="Image" />
<div class="mask-text">Hello World!</div>
</div>
</body>
</html>
CSS Masking Properties
The following table lists all the CSS masking properties:
Property | Description |
---|---|
mask-image | Specifies an image to be used as a mask layer for an element |
mask-mode | Specifies whether the mask layer image is treated as a luminance mask or as an alpha mask |
mask-origin | Specifies the origin position (the mask position area) of a mask layer image |
mask-position | Sets the starting position of a mask layer image (relative to the mask position area) |
mask-repeat | Specifies how the mask layer image is repeated |
mask-size | Specifies the size of a mask layer image |