Geek Answers Handbook

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

I play 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 get a red element in the form of a mask image.

The only catch is that I need about 25 different images. I could just upload 25 different mask images, but it would be great if I could only upload one image and then use it, similar to a CSS sprite, where I rearrange it or clip.

But I can't think of a good way to do this using mask properties. Is this doable?

The only solution I came across is to use markup similar 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 the background image and positioning it in the same way as the sprite, I use the DIV and positioning, which is in the parent div that crop it. I think the option is OK, but I wondered if there was already a webkit-based CSS property already set up just for that.

+4
source share
1 answer

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

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

Example: 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 at least I had fun breaking in.

+8
source

More articles:


All Articles