1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 8 .box{ 9 width:300px; 10 height:500px; 11 background-color:#999; 12 background-image:url("1.png"); 13 /* 不平铺 */ 14 background-repeat:no-repeat; 15 16 /* 沿x轴平铺 */ 17 /* background-repeat:repeat-x; */ 18 19 /* 沿y轴平铺 */ 20 /* background-repeat:repeat-y; */ 21 background-position:center; 22 background-attachment:scroll; 23 } 24 25 </style> 26 </head> 27 <body> 28 <div class="box"> 29 <p>滚动</p> 30 <p>滚动</p> 31 <p>滚动</p> 32 <p>滚动</p> 33 <p>滚动</p> 34 <p>滚动</p> 35 <p>滚动</p> 36 <p>滚动</p> 37 <p>滚动</p> 38 <p>滚动</p> 39 <p>滚动</p> 40 <p>滚动</p> 41 <p>滚动</p> 42 <p>滚动</p> 43 <p>滚动</p> 44 <p>滚动</p> 45 <p>滚动</p> 46 <p>滚动</p> 47 <p>滚动</p> 48 <p>滚动</p> 49 <p>滚动</p> 50 <p>滚动</p> 51 <p>滚动</p> 52 <p>滚动</p> 53 <p>滚动</p> 54 </div> 55 </body> 56 </html>
背景属性:
1.background-color 背景颜色
2.background-image 背景图片
3.background-repeat 背景平铺
平铺的几个属性：repeat(默认平铺) no-repeat(不平铺) repret-x(沿x轴平铺) repret-y(沿y轴平铺)
4.background-position 背景定位
方位词：left right center top bottom
特点： background-position:right;
★方位值只写一个时，另一个值默认居中
background-position:bottom center;
★写两个方位值时，顺序没有要求
background-position:30px 20px;
★写两个数值时，第一个值代表水平方向，第二个值代表垂直方向，如果写一个，则代表left，另一个默认居中
5.background-attachment 背景滚动
scroll（滚动）fixed（固定）