CSS Property: mask-image

The mask-image property sets an image to be used as a mask layer for an element. By default, this means the alpha channel of the mask image will be multiplied by the alpha channel of the element. This can be controlled using the mask-mode property.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mask-image</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        * {
            box-sizing: border-box;
        }
        div {
            width: 300px;
            height: 300px;
            background: orange;
            border: 1px solid red;
        }
        .a {
            width: 100%;
            height: 100%;
            background: greenyellow;
            mask-image: url("/demo/star.png");
            mask-size: 100% 100%;
            mask-clip: border-box;
        }
    </style>
</head>
<body>
<div>
    <div class="a"></div>
</div>
</body>
</html>

RESULT