1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 /* 8 background-image设置背景图片 9 -可以同事设置背景图片和背景颜色 10 -如果背景的图片小于元素的大小，则背景图片会自动在元素中平铺 并且铺满元素 11 -如果背景图片大一元素大小，将会有一部分无法显示 12 -如果两者一样大，则会正常显示 13 background-image:url("/path") 14 background-repeat:用来设置背景的重复方式 15 可选值： 16 -默认值x轴y轴两个方向都重复 17 -repeat-x 沿着x轴方向重复 18 -repeat-y 沿着y轴方向重复 19 -no-rapeat 背景图片不重复 20 background-position 用来设置背景图片的位置 21 设置方式： 22 通过top left right bottom center几个来进行设置 23 通过偏移量来指定背景图片的位置： 24 水平方向偏移量，垂直方向偏移量 25 background-position:left center; 26 background-position:100px 100px; 27 28 background-clip设置背景的范围 29 可选值： 30 -border-box 默认值 背景会出现在边框的下面 31 -padding-box 背景不会出现在边框，只会出现在内容区和内边 距 32 -content-box 背景只会出现在内容区 33 background-origin设置背景图片偏移量计算的原点 34 可选值： 35 -padding-box默认值，background-position从内边距开始计算 36 -border-box 背景图片的变量从边框处开始计算 37 -centent-box 背景图片的变量从边框处开始计算 38 39 40 background-size设置背景图片的大小 41 第一个值设置宽度 42 第二个值设置高度 43 -如果只写一个，则第二个值默认为auto 44 cover 图片比例不变，将元素铺满 45 content 图片比例不变，将图片在元素中完整的显示出来 46 47 48 background-attachment背景图片是否跟随着元素移动 49 可选值： 50 scroll默认值背景图片会跟随着元素移动 51 fixed背景会固定在页面中，不会岁元素进行移动 52 53 54 */ 55 56 </style> 57 </head> 58 <body>