css背景属性

一，前言

1.在写网页样式的时候，css背景是十分常用的属性，用于定义元素的背景样式。

2.当只设置了背景图片时，背景图片大小默认是自身原本的尺寸，图片的左上角和元素的左上角点对齐。

3.背景默认占据content，padding，border不包括margin。

二，css2背景

1.background-color:定义了元素的背景颜色，可以使用任何合理的颜色值，值为transparent时背景颜色为透明。可以和图片背景同时定义。

2.background-image:定义了元素的背景图片路径。

3.background-repeat: 定义是否重复背景图片

4.background-size:定义了元素的背景大小

100px 100px : 固定像素取值，字面意思就是背景图片的大小
100% 100%: 以元素本身的大小作为参考
contain: 等比例缩放展示整张图片
cover: 等比例方法图片占满这个元素。

5.background-position:是一个缩写属性，用于定义图片的起始位，即可改变默认的对齐方式（左上角对齐）

background-position-x: left,right, 10px, 10%
background-position-y:top,bottom,10px, 10%

需要十分注意的是同background-size不同，这里的百分比大小参考的是父元素的百分比，而不是元素自身大小的百分比

我们可以同时改变元素的默认对齐方式和偏移的位置
background-position：right 10px top 10px;

三，css3背景

1.css3支持多图背景，使用，来分隔每个url,要为每个图片设置其他背景属性时，也可使用用，分隔。

background:url(../../a.png),url(../../b.png)
background-repeat:no-repeat；//等价于background-repeat:no-repeat,no-repeat;
background-size:10px 10px,20px,20px；

2.background-attachment:定义背景元素是否随元素滚动
scroll：默认值，背景元素会随元素的滚动而滚动
fixed: 不随元素滚动

3.background-clip: 定义背景图片的展示区域(切割方式)，
content-box: 只展示content区域的背景，其余部分暴力的切割
padding-box:展示content和padding区域的背景，其余部分暴力的切割
border-box：展示在content和padding和border区域背景，其余部分暴力的切割

4.background-orgin:定义背景图片的展示区域(定位方式)，
content-box: 只展示content区域的背景，改变了图片的默认对齐方式，
padding-box:展示content和padding区域的背景
border-box：展示在content和padding和border区域背景