如何将<canvas>元素作为网站背景
来源:互联网 发布:php 微信自定义分享 编辑:程序博客网 时间:2024/05/23 02:05
相较于传统的一张图片作为网站背景,使用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来的直接。具体的,看你咯。
阅读全文
0 0
- 如何将<canvas>元素作为网站背景
- 如何载入一个图片,并将其作为Stage背景
- React-Native 如何将图片作为页面的背景以及控件的嵌套实现启动应用
- React-Native 如何将图片作为页面的背景以及控件的嵌套实现启动应用
- 用 canvas 做个好玩的网站背景
- 将一个背景图片加到对话框上作为背景
- 将View存成bitmap,去色,作为button背景
- 如何将canvas转化为图片
- 如何将canvas保存为本地图片
- canvas元素
- canvas元素
- canvas元素
- 如何将UIPageControl作为 UIViewController的容器
- 如何将UIPageControl作为 UIViewController的容器
- 如何将PHP作为Shell脚本语言使用
- 如何将光盘作为yum源
- 如何将PHP作为Shell脚本语言使用
- 【Android】如何将其他项目作为Lib
- 主成分分析PCA
- 大型网站数据库演进
- 数组问题总结
- Linux Bootloader总结
- OkHttp3学习
- 如何将<canvas>元素作为网站背景
- 流的概念和作用1
- Python 进阶
- Java基础之重写和重载谁是谁
- 时间是空
- 关于微信服务器ngrok 配置失败解决方案
- 2018届秋季校招Java面试题总结(二)
- 7_springboot学习笔记(慕课网)(intellij idea)
- 基于HTML5 Canvas的工控SCADA模拟飞机飞行