个人中心
gpt4 book ai didi

html - 如何使用图像屏蔽 html 元素

转载 作者：可可西里 更新时间：2023-11-01 13:07:37 26 4
gpt4 key购买 nike

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

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

最佳答案

我建议使用内部透明外部不透明的人物形象的png(意思是人体是透明的而其周围的框架是不透明的，例如白色或其他)而不是它下面的div(宽度相同)可以根据需要改变高度并且具有特定的颜色(或渐变)，那么它看起来就像 body 正在充满或排空力量。

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

例如 http://www.doorway-to-self-esteem.com/images/human_figure_copyr.jpg

要使用完整的 css/svg 掩码，您可以查看以下链接:

  1. https://css-tricks.com/clipping-masking-css/
  2. http://unakravets.tumblr.com/post/50352178165/creating-a-truly-cut-out-div
  3. http://www.html5rocks.com/en/tutorials/masking/adobe/

The difference between clipping and masking

Masks are images; Clips are paths.

Imagine a square image that is a left-to-right, black-to-white gradient. That can be a mask. The element it is applied to will be transparent (see-through) where there is black in our gradient mask image, and opaque (normal) where there is white. So the final result will be an element that fades in from left to right.

Clips are always vector paths. Outside the path is transparent, inside the path is opaque.

...There was a WebKit-only version of masking where you could link up a raster image or define a gradient to be a mask. ... More modern references I've found only mention masks as being defined in SVG and referenced in CSS by ID or URL.

特别是要将图像用作(剪切)蒙版，您需要使用 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 */
}

更新添加另一种方法(适用于不需要 .svg 的 .png 图像)

改编自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 - 如何使用图像屏蔽 html 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30462994/

26 4 0
文章推荐： php - Cron 正在运行但功能不工作
文章推荐： php - YOUR uname 说什么？
文章推荐： php - 嵌套到无限深度的多维数组
文章推荐： php - 最好的PHP培训？
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com