相較於傳統的一張圖片作爲網站背景,使用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來的直接。具體的,看你咯。