Trying to use some CSS on a div and mask it to a p开发者_如何学Pythonarticular shape. The concept is to create a div, mask that div into a shape (say a silhouette of a person) and apply some background css gradients to the div. Essentially getting a gradient silhouette of a person, where I can easily change the colours by changing the css colors.

I've been attempting -webkit-mask (as seen here: masking an image) but can't seem to get it work on a div/span/whatever

Anyone done anything similar? B

For cross browser compatibility, you need to create your mask as a transparent image in the shape you like. See my link below. I create a triangular mask in photoshop and applied it to an image.

Check working example at http://jsfiddle.net/39VG9/1/

This is the only known example of -webkit-mask documentation for CSS masks, and it contains syntax mistakes. The official Safari documentation contains a dumbed down version of this. According to the blog post, complex webkit masks (using SVG images) can work on any box content.

Masks are also part of SVG 1.1, but I have no information on whether they actually have been implemented correctly (or at all).

Yes.

<style>
  #image {
    mask: url(#mask);
    -webkit-mask: url(mask.svg) top left / cover;
    -o-mask: url(mask.svg) top left / cover;
    -ms-mask: url(mask.svg) top left / cover;
  }
</style>

http://www.html5rocks.com/en/tutorials/masking/adobe/