html2canvas z-index不起作用

Question

我正在使用html2canvas库将div转换为png。

我遇到关于z-index的问题。如您在图像上看到的，我有盒子。在一个盒子里，我有一个用于背景颜色的div（z-index: 0），它随高度值而增长，一个用于数字的div（z-index: 1）。像往常一样在浏览器上可以正常工作，但是当我尝试拍摄图像时，z-index似乎不起作用。

在浏览器上正常：

有关图像版本的问题：

任何帮助，我将不胜感激。

Answer 1

我遇到了同样的问题。而且我发现html2canvas忽略z-index，并且在将div绘制为img时仅遵循div的顺序。例如，

<div id=1 zIndex=2></div>
<div id=2 zIndex=3></div>
<div id=3 zIndex=1></div>

如果所有这些div重叠，则divid2出现在页面中，然后divid1和divid3出现在网页中，因为它关心zIndex。

html2canvas只关心div的顺序，而忽略zIndex，这意味着divid1向前，divid2在divid1之后，divid3在div2之后。我测试了多次。

我希望这会有所帮助。

Answer 2

您是否进行了检查：为了使z-index正常工作，每个具有一个的元素还必须设置一个位置（例如position：relative）...

Answer 3

尝试以下步骤，看看其中一个是否对您有用：

1. 尝试为不同的div设置较高的z-index值。例如：.div1 {z-index:1} .div2{z-index:10000)。
2. 尝试对定义了z-index的每个div定义一个位置。
3. 尝试将z-index值最大的div放在绝对/固定位置。