一、背景图设置
使用背景图片，设置为全屏
方式1：全部使用background设置
body{
background-image: url(bg.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
背景图片
背景尺寸
背景图是否重复
背景是否滚动
方式2：使用宽高
body {
width: 100%;
height: 100%;
background: url(img/bg.jpg) no-repeat;
}
方式3：使用边距
body {
padding: 0;
margin: 0;
background: url(img/bg.png);
}
CSS背景知识点
1、background-color -- 背景色,定义背景的颜色
<color>: 颜色表示法
transparent: 透明
inherit: 继承
2、background-image -- 定义背景图片
<uri>: URI
none: 无
3、background-repeat -- 定义背景图片的重复方式
repeat: 平铺整个页面,左右与上下
repeat-x: 在x轴上平铺,左右
repeat-y: 在y轴上平铺,上下
no-repeat: 图片不重复
4、background-position -- 定义背景图片的位置
1、水平
left: 左
center: 中
right: 右
2、垂直
top: 上
center: 中
bottom: 下
3、垂直与水平的组合
x-% y-%
x-pos y-pos
inherit: 继承
p {
background-image:url('list-orange.png');
background-position:right bottom ;
background-repeat:no-repeat;
}
div {
background-image:url('list-orange.png');
background-position:50% 20% ;
background-repeat:no-repeat;
}
5、background-attachment -- 定义背景图片随滚动轴的移动方式
取值: scroll | fixed | inherit
scroll: 随着页面的滚动轴背景图片将移动
fixed: 随着页面的滚动轴背景图片不会移动
inherit: 继承
初始值: scroll
