1、设置背景样式:
background-color:#bfa; // 设置背景颜色
background-image:url(相对路径); // 设置背景图片
2、可以同时给一个元素指定背景颜色和背景图片,背景颜色会作为背景图片的底色
background-repeat:repeat; // 设置背景图片的重复方式
可选值:
repeat,默认值,背景图片会双方向重复(平铺)
no-repeat,背景图片不会重复,有多大就显示多大
repeat-x,背景图片沿水平方向重复
repeat-y,背景图片沿垂直方向重复
3、背景图片默认值贴着元素的左上角显示,通过 background-position 可以调整背景图片在元素中的位置
可选值:
1. 该属性可以使用 top 、right 、left 、bottom 、center 中两个值来指定背景图片的位置
top left 左上
bottom right 右下
如果值给出一个值,则第二个值默认是 center
2. 也可以直接指定两个偏移量:background-position:100px 0px; // 水平向右移动100个像素,垂直方向不动
第一个值是水平偏移量:正值,图片向右移动指定像素
负值,图片向左移动指定像素
第二个值是垂直偏移量:正值,图片向下移动指定像素
负值,图片向上移动指定像素
3. background-attachment 用来设置背景图片是否随页面一起滚动
可选值:
scroll,默认值,背景图片随窗口滚动
fixed,背景图片会固定在某一位置,不随页面滚动
当背景图片的 background-attachment 设置为 fixed 时,背景图片的定位永远相对于浏览器的窗口
4、外部资源加载时,并不是同时加载,浏览器会在资源被使用才去加载资源(例如多张背景图片,点击更换效果)
当触发按钮时,浏览器加载图片需要一定的时间,所以加载和显示过程会有一段时间,背景图片无法加载,导致出现闪烁的情况
为了解决多张图片不能同时加载出现闪烁的问题,可以把三张图片整合为一张图片,
使用 background-position 来切换显示的图片位置,这种技术叫做图片整合技术(CSS-Sprite)
优点:
1.将多张图片整合为一张图片里,浏览器只需要发送一次请求,可以同时加载多个图片,提高访问效率,提高用户的体验
2.讲多个图片整个为一张图片,减小图片的总大小,提高请求速度,增加用户体验
5、background 通过该属性可以同时设置所有背景相关的样式,没有顺序要求,也没有数量要求,不写的样式使用默认值。
background:#bfa url(../img/3.png) center center no-repeat fixed ;