设置网页背景的几种方法及网页中小icon的加载

设计网页时，我们一般不喜欢让背景白白的，那么问题来了——

找到的背景图片遮不住整个网页怎么办？

伪背景：背景图片放在一个<img>标签里，将其 style设为{
position:absolute;
top:0;left:0;height:100%;width:100%;
★z-index:-9;(层次设为负数)
}即将图片置于其他页面元素的下层之后设置它不随网页滚动

//在本地引用上一级目录的img素材时，用background：url（“../imgs/img.jpg”），俩点表示相对当前目录的上一层目录中的文件/文件夹
模式图pattern：
由于一些大的背景图加载起来比较慢，因此可将其裁成一“细条”，如横向像素设为10px，然后用css里的background-repeat-x设置重复方式repeat-x：repeat；即下载好“细条”后把它在用户端横向重复加载从而设置背景，这样加载起来会很快，效果也不会太差

也可用于设置类似花纹的重复图案背景（见下文安利的patterninja）

3.cover属性：

cover把背景图像拉伸至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。background-size:cover;

用这种方法时应考虑不同大小屏幕导致图片变形的问题

自行设计背景：

1.线性渐变background:liner-gradient(#fff,#000)  （例），实现黑到白渐变，其中的#fff和#000可以用rgb（x,y,z,w）进行设置，这样可以设置背景的透明度

2.patterninja，背景编辑网站，在线生成pattern



另一个加速用户端下载网页素材的方式：“css sprite”

由于——
a.网页中通常会包含大量且小尺寸的背景图或装饰性图，由于http1.1协议的局限，这通常会给WEB服务器带来并发性问题和流量负担
b.每个图片都包含有图片头等元信息
c.每个图片都占用一个http连接，都需要接发http头信息
d.http1.1协议默认支持并发连接数量有限 http://smilejay.com/2013/01/max-concurrent-connections/
因此可将若干小图标“合成”在一张大图上，加载时只加载一张大图，而显示时显示大图的其中一部分，这样可以减少相关信息的重复加载，且不需考虑并发加载元素数量有限的问题，减少网络负担，提高加载速度，节约带宽（合成大图工具网站：css sprite）

又一种导入小图标的方法：“font awesome”

font awesome的原理是把图片制作成字体库，使用图片
4000
时以字体的方式将其导入。使用时需到官网（中英文两网站均可）下载一下，然后将压缩文件中的font与css文件解压到相应网页的目录下，在原网页中引用一下css文件，然后在fontawesome的网站中按照它的example案例复制粘贴就好。（其中使用了css3的强制下载字体新功能，即如果用户那边没有相应字体，则到设置好的地址去下载，避免加载不出对应字体的情况发生），也可用阿里的网站 iconfont 或其他工具制作自己的字体图标库，这样可以将字体文件变得尽量小，减少下载时的速度

用于设置类似花纹的重复图案背景，