Can you use a CSS sprite for webkit-mask-box-image (or clip it?)

Question

I'm playing with the -webkit-mask-box-image css property.

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

This works great. I end up with a red element in the shape of the mask image.

The only catch is that I need about 25 different images. I could just load up 25 different mask images, but it'd be great if I could load just one image and then use it akin to a CSS sprite where I reposition it or clip it.

But I can't think of a good way to do that with the mask properties. Is it doable?

The one solution I came up with would be to use markup akin to this:

<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>

Instead of using a background image and positioning it as you would a sprite, I'm using a DIV and positioning that within a parent div that crops it. I think that's an OK option, but was wondering if there was a webkit-centric CSS property already designed for exactly this.

Lovelorn

Another question I have - what exactly is the difference between -webkit-mask-image and -webkit-mask-box-image? – Yester

box image is meant for border masking and has additional features like it can be repeated along the border...html5rocks.com/en/tutorials/masking/adobe – Vogel

Answer 1

I went digging into webkit masks since I got really interested in your question - I'm not sure if I understand correctly the difference between -webkit-mask-image and -webkit-mask-box-image - but the main difference to me is that -webkit-mask-box-image can stretch to fit the container even if the mask image is not the same size.

Since you have a fixed size container I would try using the -webkit-mask-position to move the mask image (note that it works only together with -webkit-mask-image).

Sample: http://jsfiddle.net/easwee/pChvL/68/

Code:

<div class="image mask">
    <img src="image.jpg" />
</div>
<br />
<div class="image mask2">
    <img src="image.jpg" />
</div>


.image {width:200px;height:200px;}
.mask {
    border:1px solid green;
    -webkit-mask-image: url('mask.gif');
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:0 0;
}
.mask2 {
    border:1px solid green;
    -webkit-mask-image: url('mask.gif');
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:0 -200px;
}

Not sure if this will work for you, but atleast I had fun digging in.

Yester

Thanks for the answer! In the end, I had to scrap it all. It turns out mobile safari (at least when embedded via phonegap) has image size limitations. My sprite image was extremely large and wouldn't load until I reduced the size. In the end, we had to go the old slice-n-dice route. – Lovelorn

@DA - lame how good ideas turn out bad on mobile - happened to me few times too hehe. – Yester

Very useful, didn't know that diff with -box – Kimberleykimberli

Another difference I observed is -webkit-mask-image is not able to render image in iOS device (Tested on chrome iOS) whereas -webkit-mask-box-image works perfactly. – Shouldst

mask.gif is not available anymore, please update jsfiddle – Symposiac