相較於傳統的一張圖片作爲網站背景，使用CSS動畫和HTML5畫圖明顯是更出色、更具時代性的新前端做法。如果在2017年還在使用靜態背景，沒準人家真的會覺得你有5年以上開發經驗呢。
今天來講一下如何將繪製出的作爲背景，從而使其他元素可以在canvas背景下正常排列，達到就像gif圖背景一樣的效果。
首先我們看代碼：
作爲示例，我們定義了一個元素。引入background.js繪製。具體的background.js是一個擁有scrollWidth和scrollHeight的全屏的星空動畫。具體實現大家不必理會，效果是這樣滴：
(其實整個星空一直在動)
出了元素外，我們還添加了一個寬、高30px的紅色
進行測試，看看能否，或者說如何將其放置在畫布上。
好，編譯。我們發現空空如也。只有一片星空。
打開控制檯，將的高度修改成200px，我們發現，噢，原來div被順序排列在了canvas之後。
解決這個問題最簡單有效的方法：
- z-index : -1;
- position : absolute;
看看結果：
如你所見，最簡單的將設爲背景的方法即1.將其絕對定位，2.將其z-index設做負數。
拓展：
除了z-index，其實當一個元素被設置了opacity，transforms, filters, css-regions, paged media等屬性時，也會產生新的層。比如當你將opacity設爲一個小於100%的數，元素也會移至最下層。不過筆者還是覺得不如設置z-index來的直接。具體的，看你咯。