Google Chrome 中的 HTML5 Canvas 和 z-index 问题

当我们将 z-index 应用于位置固定的画布时，它会停止渲染，导致 Chrome 无法正确渲染所有其他已设置 position:fixed 的元素。只有当画布尺寸大于 256x256 像素时，才会发生这种情况。

用固定的 div 包裹 h1 和画布，即可解决问题 −

<div id = 'fixcontainer'>
   <h1>测试标题</h1>
   <canvas id = "backgroundCanvas" width = "1000" height = "300"></canvas>
</div>

以下是 CSS −

h1{
   position: fixed;
}
body{
   height: 1500px;
}
canvas{
   position: fixed; z-index: -10;
}

相关文章

• HTML DOM 输入按钮对象
• HTML 画布 shadowBlur 属性
• HTML DOM address 对象
• HTML 画布 shadowColor 属性
• 使用 onmouseover 属性更改网页背景颜色
• HTML 画布 fillStyle 属性
• HTML frame 框架标签
• HTML Canvas clearRect() 方法
• HTML body 标签
• HTML optgroup 标签

有用资源

• html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/