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


当我们对位置固定的 Canvas 应用 z 索引时,它会停止导致 Chrome 正确渲染所有具有 *position:fixed* 的其他元素。仅当 Canvas 大小超过 256X256 像素时才会出现这种情况。

用固定 div 将 h1 和 Canvas 包裹起来并解决问题 −

<div id = 'fixcontainer'>
   <h1>Test Title</h1>
   <canvas id = "backgroundCanvas" width = "1000" height = "300"></canvas>
</div>

以下为 CSS −

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

更新于:04-Mar-2020

676 次浏览

开启您的 职业生涯

完成课程获得认证

开始学习
广告