CSS学习笔记——背景

1.背景颜色 background-color

body {
    background-color: #ccc;
 
}

2.背景图片：background-image:url()

div {
width: 1000px;
height: 600px;
background-color:skyblue;
 background-image: url(../images/1.jpg);
}

注意：图片路径在同一文件下,相对路径需要加上…/。

3.背景平铺：background-repeat

默认：repeat 水平，垂直，水平方向都平铺；
不平铺：no repeat；
横向上平铺：repeat-x 纵向平铺：repeat-y；
设置背景背景图片时候，默认把图片在水平方向和垂直方向平铺整个元素 常使用no-repeat。

4.背景位置：background-position

position（x坐标） position（y坐标）
position可以是精确坐标位置，也可以是方位名词（center，left，right，top，bottom）。如果方位名词和精确单位混合使用，一定是x坐标在前，y坐标在后

div:first-child {
    width: 1000px;
    height: 600px;
    background-color:skyblue;
    background-image: url(../images/1.jpg);
    background-repeat:no-repeat;
    background-position: center 20px;
    background-size: contain;
}

5.背景附着：background-attachment

scroll：背景图像随着对象内容滚动而滚动
fixed：背景图像固定
背景属性简写：一般采用的方式：背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 ，但是书写没有强制标准。
如 background:red url(…/images/1.jpg) no-repeat fixed center right;多个属性中间用空格隔开。

6.背景透明

background:rgba(0,0,0,0.5); 使用方法与图像头像一样

7.背景缩放

background-size:宽度 高度;
设置背景图片的尺寸，就像设置img的尺寸一样，设置单位：px或者百分比 ，一般设置一个方向即可，另外一个方向等比例缩放。
将背景图片设置为cover时，会自动调整缩放比例，保证图片始终填充背景区域，溢出部分会被隐藏 图片不会失真，但是图片可能不完整。
设置为contain会自动调整比例，保证图片始终完整显示在背景区域，但是图片会失真
cover属性相对会使用较多

8.多背景

一个元素可以设置多个图像，每组属性中间使用逗号分割，如果设置多个背景图像存在交集，前面的背景图会覆盖在后面的背景图之上。

div:last-child {
    width: 1000px;
    height: 600px;
    background-color: #fff;
    background: url(../images/6.jpg) no-repeat scroll,
    url(../images/10.jpg) no-repeat scroll right bottom
    ;
}