Layering multiple canvases using z-index doesn't show highest layer

StackOverflow https://stackoverflow.com/questions/22505223

  •  17-06-2023
  •  | 
  •  

题

In HTML, I am trying to create one canvas that just displays an image with the colour black, and another canvas that displays a white border on top of the black canvas beneath it. Here's the HTML code:

<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>

When I run the code in Google Chrome, I can only see the black background and no white border. What have I done wrong here? I tried searching for the problem but I didn't find an answer.

有帮助吗？

解决方案 2

Are you closing your canvas tags?

You have 

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

Try instead 

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

其他提示

It's because your HTML is not well formatted.

This:

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

Should be this:

<canvas width=600 height=400 style="position:absolute;background-image:url('Black.png');z-index:1;">
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top