1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 8 .box1{ 9 width: 257px; 10 height:133px; 11 margin: 0 auto; 12 background-color: #bfa; 13 /* 14 使用background-image来设置背景图片 15 语法 background-image:url(相对路径) 16 如果背景图片大于元素，默认会显示图片的左上角 17 如果背景图片的元素一样大，则会将图片全部显示 18 如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素 19 20 可以同时为一个元素指定背景颜色和背景图片 21 这样背景颜色将会作为背景图片的底色 22 一般情况下设置完背景图片时都会同时指定一个背景颜色 23 */ 24 background-image: url(捕获1.PNG); 25 /* 26 background-repeat用于设置背景图片的重复方式 27 可选值 28 repeat 默认值，背景图片会双方向重复（平铺） 29 no-repeat 背景图片不会重复，有多大就显示多大 30 repeat-x 背景图片沿水平方向重复 31 repeat-y 背景图片沿垂直方向重复 32 33 背景元素是默认贴着元素左上角显示 34 通过background-position可以调整背景图片在元素中的位置 35 可选值 36 top right left bottom center中的两个值来指定一个背景图片的位置 37 top left 左上 38 background-position:bottom right 右下 39 background-position:center center 居中 40 如果只给出一个值则第二个值默认是center 41 42 也可以直接指定两个偏移量 43 第一个是 水平偏移量 44 第二个是 垂直偏移量 45 background-position:100px 100px 向左偏移100px 向下偏移100px 46 水平偏移量 如果指定一个正值，则图片会向右移动指定的像素 47 如果指定一个负值，则图片向左移动指定的像素 48 垂直偏移量同理 49 */ 50 background-repeat: no-repeat; 51 } 52 body{ 53 background-image: url(捕获111.PNG); 54 background-repeat: no-repeat; 55 /* 56 background-attachment用来设置背景图片是否随页面一起波动 57 可选值 58 scroll 默认值，背景图片随着窗口波动 59 fixed 背景图片会固定在某一个位置，不随页面波动 60 61 当背景图片的background-attachment设置为fixed时， 62 背景图片的定位永远相对于浏览器的窗口 63 64 不随窗口滚动的图片，一般设置给body，而不设置给其他元素 65 66 */ 67 background-attachment: fixed; 68 } 69 </style> 70 <!--也可以将.box写在CSS中导入 71 <link rel="stylesheet" type="text/css" href="new_file.css" /> 72 --> 73 </head> 74 <body> 75 <div class="box1"></div> 76 </body> 77 </html>