背景颜色
背景颜色用background-color设置,一般情况下元素的背景颜色的属性值默认是transparent(透明),设置背景颜色的元素需要有宽高属性或内容才能显示效果
元素的背景是元素的总大小，包括内边距和边框,但不包括外边距。背景颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色
背景图片
background-image属性设置一个元素的背景图像。元素的背景是元素的总大小，包括内边距和边框,但不包括外边距。默认情况下，background-image放置在设置背景图片元素的左上角，当容器元素盒子的大小大于背景图片的大小时会重复平铺在垂直和水平方向。
实际开发中常用于logo或者一些装饰的小图片或者超大的背景图片,便于控制图片的位置,精灵图就是一种运用场景
插入图片和背景图片的区别:
1.插入图片在更改图片大小时使用属性 width 和 height ，更改图片位置使用 margin 或 padding 盒模型
2.背景图片在更改图片大小时使用 background-size 属性，更改图片位置时使用background-position属性
3.一般情况下背景图片适合做一些小图标使用，产品展示之类的就用插入图片
background-image: url('图片路径');一般用相对路径插入图片
元素既可以设置背景图片也可以设置背景颜色,但是背景图片会压住背景颜色,背景图片在视觉上显示在元素盒子的上方
背景图片平铺
默认情况下，background-image会重复的平铺在垂直和水平方向。
background-repeat可设置图片是否平铺
| 值 | 说明 |
|---|---|
| repeat | 背景图像将向垂直和水平方向重复 | 默认值 |
| repeat-x | 只有在水平方向会重复背景图像 |
| repeat-y | 只有在垂直方向会重复背景图像 |
| no-repeat | 不会重复 |
背景图片位置
background-position属性可以设置背景图像在元素盒子中的位置
background-position:x y;
参数x和y代表x坐标(水平方向:left和right)和y坐标(垂直方向:top和bottom),可以用方位名词或者百分比或者固定值
第1个值x坐标表示水平方向:值增大时,背景图片向右移动;值减小时,背景图片往左移动
第2个值y坐标垂直方向:值增大时,背景图片向下移动;值减小时,背景图片往上移动
| 参数值 | 说明 |
|---|---|
| length | 百分数 | 由整数或浮点数和像素单位px组成的固定值 |
| position | top | center | bottom | left | center | right |
1.参数是方位名词
1.1如果指定的两个参数值都是方位名词,则两个值的前后顺序无关,比如left top和top left的两者效果一致
1.2如果仅指定了一个参数值是方位名词，另一个值省略,则第2个值默认是center居中对齐
2.参数是精确单位的固定值
2.1如果指定的两个参数值是精确坐标为固定值或者百分比,值的顺序不能改变,那么第1个肯定是x坐标,第2个一定是y坐标
2.2如果只指定了一个数值,那么该数值一定是x坐标,另一个y坐标默认垂直居中
3.参数是混合单位
如果指定的两个值是方位名词和精确单位固定值或者百分比混合使用,则第1个值是x坐标,第2个值是y坐标
4.参数值是百分比
x坐标:(容器的宽度-图片的宽度)*百分比 = 图片最左边到容器左边的距离
y坐标:(容器的高度-图片的高度)*百分比 = 图片最上边到容器上边的距离
背景图片固定(背景图片附着)
background-attachment设置背景图像是否固定或者会随着页面的其余部分滚动,可以做出视差滚动的效果
background-attachment:fixed;
| 值 | 说明 |
|---|---|
| scroll | 背景图像相对于元素固定,背景图像是随对象内容滚动| 默认值 |
| fixed | 背景图像相对于窗体固定(相对于body元素固定)。任凭页面内容滚动，背景图像始终静止不动。 |
背景简写
background属性的值没有特定的书写顺序,一般习惯约定顺序为:
background: 背景颜色 背景图片地址 背景图片平铺 背景图片滚动 背景图片位置
背景图片缩放
background-size设置背景图片的尺寸,CSS3新增属性
参数可以设置长度单位（px）或百分比（设置百分比时，参照盒子的宽高）
1.当设置一个值时，第二个值为auto,比如:横向展示为设置的值(长度单位的像素值)或者设置的百分比 * 盒子的宽度，纵向会按照原图宽高度等比缩放
2.设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。是等比例缩放图片，直到盒子被完全填充满，那么很显然图片会有一部分被截取掉,特点：会填充满整个盒子，但是图片不一定能够显示完整
3.设置为contain时，会自动调整缩放比例，保证图片始终完整显示在背景区域,只要图片的一边（下边或者右边其中一边）填满了盒子，就止步，不会在继续填充,特点：图片一定能显示完整，但是可能就不能填充满盒子
背景颜色半透明
CSS3支持背景颜色半透明的效果,CSS3新增属性
background: rgba(0, 0, 0, 0.5);
最后1个参数是透明度:alpha的取值范围在0~1之间,0是100%透明色,1是100%不透明色,允许省略掉透明度小数点前的0
ps:背景半透明是指盒子背景颜色半透明,盒子里面的内容不受影响
同样可以给文字和边框透明，都是使用rgba的格式来写
color: rgba(255, 0, 0, 0.3);
border: 1px solid rgba(255, 0, 0, 0.5);
多背景图片
以逗号分隔可以设置多背景图片,可用于自适应布局,CSS3新增属性
不同的背景图片用逗号隔开，并且图片会彼此堆叠，其中的第1幅图片最靠近观看者的视觉,前面的图片会堆叠在后面的上面,相当于依次向观看者的后方排队,第1幅图片排在第1个（需要展示的图像放前面）
background-image:url(图片路径), url(图片路径); /*使用多张图片*/
background-position: left top, right bottom;
background-repeat: no-repeat, repeat;
背景颜色渐变
背景颜色渐变可以让你在两个或多个指定的颜色之间显示平稳的过渡,CSS3新增属性
定义了两种类型的渐变:
1.线性渐变:向下/向上/向左/向右/对角方向
1.1从上到下的线性渐变,默认值
background: linear-gradient(red, blue);
表示颜色从上往下，从红到蓝转换,默认各占50%
background：linear-gradient( red , yellow , green );
表示红色 ，黄色 ，绿色三色在0-100之间依照顺序有过渡的变化
background：linear-gradient(red 0% , yellow 20% , yellow 100%);
表示0为红色，0-50为红色到黄色渐变， 100黄色
1.2从左到右的线性渐变
background: linear-gradient(to right, red, yellow, blue, green);
1.3对角方向的线性渐变,从左上角开始到右下角的线性渐变
background: linear-gradient(to bottom right, red, blue);
使用透明度,渐变还支持透明度,也可用于创建渐变效果。
如需添加透明度，我们使用 rgba() 函数来定义色标。 rgba() 函数中的最后一个参数可以是 0 到 1 的值，它定义颜色的透明度：0 表示全透明，1 表示全彩色（无透明）。
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
从左开始的线性渐变。它开始完全透明，然后过渡为全色红色
使用角度,如果希望对渐变角度做更多的控制,可以定义一个角度来取代预定义的方向,向下、向上、向右、向左、向右下等
background-image: linear-gradient(angle, color-stop1, color-stop2);
这个角度指定水平线和渐变线之间的角度,表示中间的水平线顺时针旋转指定的角度开始渐变
2.径向渐变:由它们的中心定义
2.1颜色结点均匀分布的径向渐变
background: radial-gradient(red, green, blue);
2.2颜色结点不均匀分布的径向渐变
background: radial-gradient(red 5%, green 10%, blue 50%);
2.3形状为圆形的径向渐变
background: radial-gradient(circle, red, green, blue);
