Question

在HTML中，我试图创建一个仅显示黑色图像的画布，以及另一个在其下方黑色画布顶部显示白色边框的画布。这是HTML代码：

<body>
<canvas width=600 height=400 style="position:absolute;background-image:url('Black.png');z-index:1;"
</canvas>
<canvas width=400 height=200 style="position:absolute;border:1px solid #FFFFFF;z-index:2;"
</canvas>
</body>

当我在Google Chrome中运行代码时，我只能看到黑色背景而没有白色边框。我在这做错了什么？我试着寻找问题，但我找不到答案。

Answer 1

这是因为您的HTML格式不正确。

此：

<canvas width=600 height=400 style="position:absolute;background-image:url('Black.png');z-index:1;"

应该是这样的：

<canvas width=600 height=400 style="position:absolute;background-image:url('Black.png');z-index:1;">

Answer 2

您是否正在关闭画布标签？

你有

<canvas width=600 height=400 style="position:absolute;background-image:url('Black.png');z-index:1;"

尝试改为

<canvas width=600 height=400 style="position:absolute;background-image:url('Black.png');z-index:1;">

使用z-index分层多个画布不会显示最高层

2 个答案: