背景分为—背景颜色和背景图片
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 300px; height: 300px; border: 10px solid red; /*背景颜色三种表示方法:颜色的单词,rgb,16进制*/ background-color:green; background-color: rgb(0,0,0); background-color:#008800; } </style> </head> <body> <div> </div> </body> </html>背景图片有：位置 重复性
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 300px; height: 300px; border: 10px solid red; /*背景图片*/ background-image:url(images/img.jpg); /*背景图片是否重复：repeat * repeat-x横向重复 * repeat-y纵向重复 * no-repeat不重复 * */ background-repeat: no-repeat; background-repeat: repeat-x; background-repeat: repeat-y; /* background-position:x y; 背景图片的位置 传数值：（背景图片离左上角的距离） x: 正值 从容器的左边往右边走的距离 负值 从容器的左边往左边走的距离 y: 正值 从容器的上边往下边走的距离 负值 从容器的上边往上边走的距离 传关键字 x: left 图片在容器的左边 center 图片在容器X轴的中心 right 图片在容器的右边 y: top 图片在容器的上边 center 图片在容器Y轴的中心 bottom 图片在容器的下边 * */ background-position: 5px 10px; } </style> </head> <body> <div></div> </body> </html>