1  2  3  4     
      5      6     
      7     
      8     
      9     
     10     18 19 20     
     
      21     
     
22      23     
     
      24         
      25     
     
26      27     
     
      28     
     
29      30     
     
      31         1.repeat-x url(zf.jpg);32     
     
33      34     
     
      35         2.repeat-y url(zf.jpg);36     
     
37      38     
     
      39         3.repeat-x 0px 50px url(zf.jpg);40     
     
41      42     
     
      43         4.repeat 25px 25px url(zf.jpg);44     
     
45      46     
     
      47         5.repeat-x bottom url(zf.jpg);48     
     
49      50     
     
      51         6.repeat-x left url(zf.jpg);52     
     
53      54     
     
      55         7.no-repeat url(zf.jpg);56     
     
57      58     
     
      59         8.no-repeat top url(zf.jpg);60     
     
61      62     
     
      63         9.no-repeat left url(zf.jpg);64     
     
65      66     
     
      67         10.no-repeat left 100px url(zf.jpg);靠左边，则左为0，x坐标取0，只写上下68     
     
69      70     
     
      71         11.no-repeat right 100px url(zf.jpg);靠左边，则左为0，x坐标取0，只写上下72     
     
73      74     
     
      75         12.no-repeat 100px bottom url(zf.jpg);靠下（代表上下），所以只用写左右，100px76     
     
77      78     
     
      79         13.no-repeat -50px 50px url(zf.jpg);距离左边-50px，上边50px80     
     
81      82     
     
      83         14.no-repeat -50px 距离左边-50px，上下默认，居中84     
     
85      86     
     
      87         15.no-repeat -50px  top = no-repeat -50px 0px (距离div边界左边-50，上边0px)88     
     
89      90     
     
      91         16.no-repeat left  top (靠左上，=(0px，0px),=只有no-repeat92     
     
93 94 

 

 这是使用的图片100px*100px，每个小方块是50px*50px。以下是效果图。

********************************************************************************

 

 

 

 

 

1.repeat-x url(zf.jpg);

 

2.repeat-y url(zf.jpg);

 

3.repeat-x 0px 50px url(zf.jpg);

 

4.repeat 25px 25px url(zf.jpg);

 

5.repeat-x bottom url(zf.jpg);

 

6.repeat-x left url(zf.jpg);

 

7.no-repeat url(zf.jpg);

 

8.no-repeat top url(zf.jpg);

 

9.no-repeat left url(zf.jpg);

 

10.no-repeat left 100px url(zf.jpg);靠左边，则左为0，x坐标取0，只写上下

 

11.no-repeat right 100px url(zf.jpg);靠左边，则左为0，x坐标取0，只写上下

 

12.no-repeat 100px bottom url(zf.jpg);靠下（代表上下），所以只用写左右，100px

 

13.no-repeat -50px 50px url(zf.jpg);距离左边-50px，上边50px

 

14.no-repeat -50px 距离左边-50px，上下默认，居中

 

15.no-repeat -50px top = no-repeat -50px 0px (距离div边界左边-50，上边0px)

 

16.no-repeat left top (靠左上，=(0px，0px),=只有no-repeat