如何使用图像掩蔽html元素
我在做游戏。左下角将是球员的健康状况。我想通过显示一个人体的轮廓来表示这种健康，其中健康值是一个渐变图像，被填充，当他们下降健康时，梯度图像会向下移动，让背景显示出来。
我有下面的代码，但我看到的只是div中的渐变图像，它没有被遮掩，这是一个黑白图像。我这是怎么了？我使用的是chrome，这是我唯一需要支持的浏览器。
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>回答 1
Stack Overflow用户
发布于 2015-05-26 15:40:49
我建议使用透明的人体图形，在外(指人体是透明的，其周围的框架是不透明的，例如白色或某物)，而不是在它下面有一个可以根据需要改变高度和特定颜色(或梯度)的div，然后它就会看起来像是在填充或排空力量。
Note这是跨浏览器的解决方案，本身不需要css掩码。
例如copyr.jpg
要使用完整的css/svg掩码，可以检查以下链接：
- 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/
裁剪和掩蔽的区别 面具是图像，剪辑是路径。 想象一个方形图像，是一个从左到右的黑白渐变。可以是面具。它被应用到的元素将是透明的(透过)，在我们的梯度掩模图像中有黑色，而不透明(正常)在有白色。因此，最终的结果将是一个从左到右逐渐消失的元素。 剪辑始终是向量路径。路径外部是透明的，路径内部是不透明的。 ...There是一个WebKit版本的掩蔽，您可以链接光栅图像或定义一个梯度作为掩码。..。我发现，更现代的参考资料只提到掩码是在SVG中定义的，并且在CSS中通过ID或URL引用。
特别地，要使用图像作为(剪辑)掩码，您需要使用插画师或.svg之类的程序将图像转换为矢量( 相似 )，并执行如下操作：
html
<div id="masked" class="mask this-has-gradient"></div>css
.mask {
mask: url(human-body.svg);
}掩蔽的其他选项
.mask {
mask-type: luminance; /* white = transparent, grays = semi-transparent, black = opaque */
mask-type: alpha; /* transparent areas of the image let image through, otherwise not */
}更新添加另一种方法(使用不需要.svg的.png映像)
改编自这里
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
结果(在火狐和chrome上测试)
将html元素封装在svg元素中，该元素使用image作为(亮度)掩码。
https://stackoverflow.com/questions/30462994
复制相似问题
腾讯云开发者
