Можете ли вы использовать CSS-спрайт для изображения webkit-mask-box-image (или вырезать его?)

Я играю со свойством -webkit-mask-box-image css.

<div style="
    background-color: red;
    -webkit-mask-box-image: url('images/cards/set1.png');
"></div>

Это отлично работает. Я в итоге с красным элементом в форме изображения маски.

Единственная загвоздка в том, что мне нужно около 25 различных изображений. Я мог бы просто загрузить 25 различных изображений маски, но было бы здорово, если бы я мог загрузить только одно изображение а затем использую его аналогично спрайту CSS, где я его перемещаю или обрезаю.

Но я не могу придумать хороший способ сделать это с помощью свойств маски. Это выполнимо?

Единственное решение, которое я пришел было бы использовать разметку, похожую на эту:

<div style="
    width: 100px; 
    height: 100px; 
    overflow: hidden; 
    position: relative;">
    <div style="
        background-color: red;
        -webkit-mask-box-image: url('images/cards/set1.png');
        position: absolute;
        top: -400px
    "></div>
</div>

Вместо использования фонового изображения и его позиционирования, как спрайта, я использую DIV и помещаю его в родительский div, который его обрезает. Я думаю, что это ОК вариант, но мне было интересно, было ли свойство CSS, ориентированное на webkit, уже разработано именно для этого.