How to mask an html element with an image
I'm making a game. In the lower left corner will be the health of the players. I want to represent this health by showing the outline of the human body where the health value is a gradient image that is filled, and when they lower health that the gradient image will be pushed down to allow the second screen to pass through.
I have the following code, but all I can see is a gradient image in a div and it is not masked by a mask which is a black and white image. What am I doing wrong with this? I am using chrome and the only browser I need for support.
html, body {
height: 100%;
}
#footer{
position: fixed;
left: 10px;
bottom: 10px;
}
<body style="background-color: gray;">
<div id="footer" style="width: 15%; height: 25vw; background-color: red; ">
<img src="http://www.adamdorman.com/wallpaper/gradient_1600x1200.jpg" style="width: 100%; height: 100%; mask: url(http://upload.wikimedia.org/wikipedia/commons/6/64/Layer-masks-mask.jpg);" />
</div>
</body>
source to share
i would suggest using a png of a human figure which is transparent on the inside and opaque on the outside (this means the human body is transparent and around it is opaque like white or sth) than the div below it (with the same width) that can be resized as needed and has a specific color (or gradient), then it will appear that the body is filling or emptying the force.
Note this is a cross-browser solution that doesn't require proper css masks.
eg http://www.doorway-to-self-esteem.com/images/human_figure_copyr.jpg
To use full css / svg mask you can check the following links:
- https://css-tricks.com/clipping-masking-css/
- http://unakravets.tumblr.com/post/50352178165/creating-a-truly-cut-out-div
- http://www.html5rocks.com/en/tutorials/masking/adobe/
Difference between clipping and masking
Masks are images; Clips are paths.
Imagine a square image that has a left to right gradient from black to white. It could be a mask. The element it is applied to will be transparent (transparent), where our gradient mask has black in the image and opaque (normal) where there is white. So the end result will be an element that fades from left to right.
Clips are always vector tracks. Outside the path is transparent, inside the path is opaque.
... There was a WebKit-only version of masking where you could bind a bitmap or define a gradient as a mask .... More modern links I found only mention masks as defined in SVG and link to CSS by ID or URL.
To specifically use an image as a (clipping) mask, you will need to convert the image to a vector (.svg) with a program like illustrator or similar and do the following:
Html
<div id="masked" class="mask this-has-gradient"></div>
CSS
.mask {
mask: url(human-body.svg);
}
other masking options
.mask {
mask-type: luminance; /* white = transparent, grays = semi-transparent, black = opaque */
mask-type: alpha; /* transparent areas of the image let image through, otherwise not */
}
update adding another approach (works with .png image not requiring .svg)
adapted from here
Html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
svg#svg-masked
{
width: 307px;
height:486px;
}
.masked
{
width: 307px;
height:486px;
background: #00f;
}
</style>
<title>SVG masking/clipping</title>
</head>
<body>
<!-- SVG begins -->
<svg id="svg-masked">
<!-- Definition of a mask begins -->
<defs>
<mask id="mask" maskUnits="userSpaceOnUse">
<image width="307px" height="486px" xlink:href="human_body2.png"></image>
</mask>
</defs>
<!-- Definition of a mask ends -->
<foreignObject width="307px" height="486px" style="mask:url(#mask);">
<!-- HTML begins -->
<div class="masked"></div>
<!-- HTML ends -->
</foreignObject>
</svg>
<!-- SVG ends -->
</body>
</html>
human_body2.png
result (tested on firefox and chrome)
Apporach wraps an html element inside an element svg
it uses image
as a mask (luminance)
source to share