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
;
}