如何将<canvas>元素作为网站背景

相较于传统的一张图片作为网站背景，使用CSS动画和HTML5画图明显是更出色、更具时代性的新前端做法。如果在2017年还在使用静态背景，没准人家真的会觉得你有5年以上开发经验呢。

今天来讲一下如何将绘制出的作为背景，从而使其他元素可以在canvas背景下正常排列，达到就像gif图背景一样的效果。

首先我们看代码：

作为示例，我们定义了一个元素。引入background.js绘制。具体的background.js是一个拥有scrollWidth和scrollHeight的全屏的星空动画。具体实现大家不必理会，效果是这样滴：

(其实整个星空一直在动)

出了元素外，我们还添加了一个宽、高30px的红色

进行测试，看看能否，或者说如何将其放置在画布上。

好，编译。我们发现空空如也。只有一片星空。
打开控制台，将的高度修改成200px，我们发现，噢，原来div被顺序排列在了canvas之后。

解决这个问题最简单有效的方法：

1. z-index : -1;
2. position : absolute;

看看结果：

如你所见，最简单的将设为背景的方法即1.将其绝对定位，2.将其z-index设做负数。

拓展：
除了z-index，其实当一个元素被设置了opacity，transforms, filters, css-regions, paged media等属性时，也会产生新的层。比如当你将opacity设为一个小于100%的数，元素也会移至最下层。不过笔者还是觉得不如设置z-index来的直接。具体的，看你咯。