设计网页时,我们一般不喜欢让背景白白的,那么问题来了——
找到的背景图片遮不住整个网页怎么办?
- 伪背景:背景图片放在一个<img>标签里,将其 style设为{
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的原理是把图片制作成字体库,使用图片时以字体的方式将其导入。使用时需到官网(中英文两网站均可)下载一下,然后将压缩文件中的font与css文件解压到相应网页的目录下,在原网页中引用一下css文件,然后在fontawesome的网站中按照它的example案例复制粘贴就好。(其中使用了css3的强制下载字体新功能,即如果用户那边没有相应字体,则到设置好的地址去下载,避免加载不出对应字体的情况发生),也可用阿里的网站 iconfont 或其他工具制作自己的字体图标库,这样可以将字体文件变得尽量小,减少下载时的速度
用于设置类似花纹的重复图案背景,