The mask-image property specifies an image, CSS gradient, or SVG mask to be used as a mask layer for an element.

div {
    mask-image: url("my_mask.png");
}

div {
    mask-image: linear-gradient(black, transparent);
}

<svg width="600" height="600">
    <mask id="my_mask">
        <circle fill="#ffffff" cx="90" cy="90" r="90"></circle>
        <circle fill="#ffffff" cx="280" cy="180" r="90"></circle>
    </mask>
    <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="my_mask_image.jpg" mask="url(#my_mask)"></image>
</svg>

Default value	none
Inherited values	no
Can it be animated?	no

These are the allowed values.

Value	Description
none	Default
image	An image to use as the mask layer
url	A url reference to an image or an SVG element
initial	Sets this property to its default value
inherit	Inherits this property from its parent element

The HTML element can also be styled using JavaScript and the element’s id.

document.getElementById('my_div').style.maskImage = 'url("my_mask.png")';

<button onclick='my_function()'>Click Here</button>

<script>
function my_function() {
    document.getElementById('my_div').style.maskImage = 'url("my_mask.png")';
}
</script>

---