Question

我正在制作游戏。在左下方将是球员健康。我希望通过显示人体轮廓来表示这种健康状况，其中健康值是填充的渐变图像，当它们降低健康状态时，渐变图像将向下移动以让背景透过。

我有以下代码，但我看到的只是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>

https://jsfiddle.net/bwh3couo/

Answer 1

我建议使用一个人体的png，其内部是内部透明的（意味着人体是透明的，周围的框架是不透明的，例如白色或某些），而不是在它下面的div（具有相同的宽度）可以根据需要改变高度并且具有特定的颜色（或渐变），然后看起来好像身体正在填充或排空力量。

注意这是跨浏览器解决方案，本身不需要css掩码。

例如http://www.doorway-to-self-esteem.com/images/human_figure_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/

剪裁和屏蔽之间的区别

面具是图像;剪辑是路径。

想象一个从左到右，从黑到白的方形图像   梯度。那可以是一个面具。它应用的元素将是   透明（透视）我们的渐变蒙版中有黑色   图像和不透明（正常）有白色的地方。所以最后的结果   将是一个从左到右淡入的元素。

剪辑始终是矢量路径。在路径之外是透明的，在里面   这条路是不透明的。

...有一个仅限WebKit的屏蔽版本，您可以将其链接起来   光栅图像或将渐变定义为蒙版。 ...更现代   引用我发现只提到在SVG中定义的掩码   通过ID或URL在CSS中引用。

具体来说，要将图像用作（剪裁）蒙版，您需要使用Illustrator或similar之类的程序将图像转换为矢量（.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 */
}

更新添加其他方法（使用.png图像，不需要.svg）

改编自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

enter image description here

结果（在firefox和chrome上测试）

enter image description here

apporach将html元素包装在svg元素中，该元素使用image作为（亮度）蒙版

如何使用图像屏蔽html元素

1 个答案: