html2canvas z-index不起作用 [英] html2canvas z-index not effect

问题描述

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

I am using html2canvas library for converting a div to png.

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

I have an issue about z-index. As you can see on image, I have boxes. Inside a box I have a div for background coloring (z-index: 0), its growing with height value and a div for number (z-index: 1). It works fine on browser as usual but when I try to take image, it seems like z-index doesn't work.

在浏览器上正常:

有关图像版本的问题:

issue on image version:

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

Any help, I will be grateful.

推荐答案

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

I got the same issue. And I found out that html2canvas ignores z-index and just follows the order of div when it draws div to img. For example,

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

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

If all these divs are overlapping, divid2 comes forward then divid1 and divid3 in webpage since it cares about the zIndex.

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

html2canvas only cares about the order of divs ignoring zIndex which means divid1 comes forward and divid2 comes behind divid1, and divid3 comes behind div2. I tested multiple times.

我希望这会有所帮助.

这篇关于html2canvas z-index不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！