3_常见样式-background
1、 background 背景 （复合样式）
如：
background: #f60 url(img/timg.jpg) no-repeat 10px 20px;
2、 background-color 背景颜色
可分为 rgb,关键字，十六进制
3、 background-image: url(图片地址); 背景图片
如：
background-image: url(img/timg.jpg);
4、 background-repeat 背景图是否平铺
repeat 平铺：
repeat-x x方向平铺
repeat-y y方向平铺
no-repeat y方向平铺
5、 background-position 背景定位
关键字：
x方向(默认left)
left（图的左侧和元素左侧对齐）
center （图的中间和元素左侧对齐）
right （图的右侧和元素右侧对齐）
y方向(默认top)
top （图的顶部和元素顶部对齐）
center （图的中间和元素左侧对齐）
bottom （图的底部和元素底部对齐）
具体数值:
x方向(默认是0)
正值从左向右移动，负值从右向左移动
y方向(默认是0)
正值从上向下移动，负值从下向上移动
百分比：
图的百分之N，对齐元素的百分之N
6、 background-attachment: scroll; 背景的位置，随着滚动条移动而移动
background-attachment: fixed; 固定背景的位置，不随着滚动条移动而移动
背景添加了 fixed 坐标计算就会根据整个可视区来计算
如：
background: url(img/bg.jpg) no-repeat 0 0 fixed; 会在整个页面左上角开始计算位置。
背景的原点也就是background-position的 0 ，0 点，或者说left top的位置，默认是在元素padding区域的左上角。
7、
background-clip 背景裁切：
- background-clip 决定元素的背景，显示在元素的哪些区域里(border以内，padding以内，content以内)
- 相关属性值
- border-box （默认值）元素背景显示在border及border以里
- padding-box 元素背景显示在padding及padding以里
- content-box 只有content区域显示元素背景
- -webkit-text 只有文字显示元素背景
-webkit-text是webkit内核的浏览器的私有属性，只有在webkit内核的浏览器中才支持
- webkit-text新版本的webkit内核的浏览器已经不支持了，可以写成 -webkit-background-clip: text
8、
background-origin 背景的原点设置：
background-origin的相关属性值
- border-box：background-position的 0 0点 从元素border的左上角开始计算
- padding-box: background-position的 0 0点 从元素padding的左上角开始计算,也是默认值
- content-box: background-position的 0 0点 从元素padding的左上角开始计算
9、
元素多背景图设置：
- 在css3，支持给同一个元素添加多张背景图，每张背景图之间需要用","隔开
- 当元素拥有多张背景图时，先写的在上边，后加的图片在下边
- 在集合写法中，如果只设置一项border-box的话，浏览器默认会把background-origin和background-clip都设置为border-box
- 在集合写法中，background-origin和background-clip要做不同的设置，先写background-origin的值，再写裁切的值
- 多背景时，如果要添加背景颜色，背景颜色写在最后边
10、
background-size 背景图大小设置
- 语法：background-size：图片的宽度 图片的高度
- 接受的值得类型
- 具体数值
- 百分比
- 宽度的百分比根据元素的宽度计算
- 高度的百分比根据元素的高度计算
- 关键字
- cover 根据元素宽度等比缩放图片，优先铺满整个元素，但是图片可能会显示不全
- contain 根据元素宽度等比缩放图片，优先显示完整图片，但是元素可能会铺不满
- auto 设置宽度，高度设置auto的话，图片高度会随着宽度等比缩放，设置高度，宽度设置auto的话，图片宽度会随着高度等比缩放
