CSS中设置页面背景图片

设置背景图片的用法与注意事项

1.背景图片
background-image:url(“图片路径”) 可以是相对路径和绝对路径
例如：

background-image: url(img/aut.jpg);

2.背景图片重复
默认水平方向和垂直方向都重复
不重复 no-repeat || 水平方向重复 repeat-x || 垂直方向重复 repeat-y
例如：

background-repeat: no-repeat;

3.背景图片位置
background-position:x y
x 代表 图片距离盒子最左边 的位置
y 代表 图片距离盒子最上边 的位置
取值：
(1).px
(2).方位词 top bottom right left center
注意：
(1).当取一个值时，默认取得是水平方向的值，
垂直方向默认值是center
(2).px和方位词可以混用
例如：

background-position: 20px 40px;
或者
background-position: left top;
或者
background-position: 20px ;
或者
background-position:center 40px;

复合属性写法
background: 背景图片 图片是否重复 图片位置/图片大小，背景颜色
注意：
(1). 图片是否重复 和 图片的位置 顺序可以调换
(2). 背景图片 背景颜色 顺序不可调换
例如：

background: url(img/aut.jpg) no-repeat center/20px ,#000;

4.背景图片固定
background-attachment
取值：默认值 scroll 背景图片跟随滚动条滚动
fixed 背景图片固定在某一个位置
例如：

background-attachment: fixed;

5.背景图片大小
background-size
(1).长度单位
background-size:100%; 一般不使用百分数
注意：背景图片大小100%是相对于图片本身大小的100%，跟设置图片盒子的大小是没有关系的
(2).关键字
cover覆盖，按比例缩放，背景图片会充满整个盒子，超出盒子的部分会隐藏
contain 包含，按比例缩放，在盒子中背景图片显示完整
例如：

background-size:20px;/* 任何长度单位都行*/
或者
background-size:cover/contain ;

6.背景图片从什么位置开始显示
background-origin
取值
border-box 从边框开始显示图片，边框会覆盖在图片上面
padding-box 从内边距开始显示图片
content-box 从内容区显示图片
注意：配合background-position（图片位置）使用时，
图片原始位置由background-origin取值决定
例如：

background-origin: border-box/ padding-box/ content-box;

7.背景图片剪切
background-clip 从什么位置开始剪切图片
注意：剪切时与背景图片从什么位置开始显示有关
取值：
border-box 从边框开始剪切
padding-box 从内边距开始剪切
content-box 从内容区开始剪切
text 当文字颜色为透明时，背景被裁剪为文字的前景色
例如：

background-clip: border-box/padding-box/content-box;

总结

以上就是设置背景图片要用到和要注意的一些事项。