自http://blog.sina.com.cn/s/blog_98eef7830101cv8t.html获取的知识,特此感谢。
1 <!DOCTYPE html> 2 <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>New Document</title> 6 <meta name="generator" content="EverEdit" /> 7 <meta name="author" content="" /> 8 <meta name="keywords" content="" /> 9 <meta name="description" content="" /> 10 <style type="text/css"> 11 div{ 12 width:400px; 13 height:200px; 14 padding:8px; 15 border:1px solid #96c2f1; 16 } 17 </style> 18 </head> 19 <body> 20 <div style="width:200px; height:100px; border: 1px solid #ff0000;"> 21 </div> 22 23 <div style="padding:8px;border:1px solid #96c2f1;background:#eff7ff;width:400px"> 24 <img alt="pic" src="zf.jpg"> 25 </div> 26 27 <div style="background:url(zf.jpg);"> 28 </div> 29 30 <div style="background:repeat-x url(zf.jpg);"> 31 1.repeat-x url(zf.jpg); 32 </div> 33 34 <div style="background:repeat-y url(zf.jpg);"> 35 2.repeat-y url(zf.jpg); 36 </div> 37 38 <div style="background:repeat-x 0px 50px url(zf.jpg);"> 39 3.repeat-x 0px 50px url(zf.jpg); 40 </div> 41 42 <div style="background:repeat 25px 25px url(zf.jpg);"> 43 4.repeat 25px 25px url(zf.jpg); 44 </div> 45 46 <div style="background:repeat-x bottom url(zf.jpg);"> 47 5.repeat-x bottom url(zf.jpg); 48 </div> 49 50 <div style="background:repeat-x left url(zf.jpg);"> 51 6.repeat-x left url(zf.jpg); 52 </div> 53 54 <div style="background:no-repeat url(zf.jpg);"> 55 7.no-repeat url(zf.jpg); 56 </div> 57 58 <div style="background:no-repeat top url(zf.jpg);"> 59 8.no-repeat top url(zf.jpg); 60 </div> 61 62 <div style="background:no-repeat left url(zf.jpg);"> 63 9.no-repeat left url(zf.jpg); 64 </div> 65 66 <div style="background:no-repeat left 100px url(zf.jpg);"> 67 10.no-repeat left 100px url(zf.jpg);靠左边,则左为0,x坐标取0,只写上下 68 </div> 69 70 <div style="background:no-repeat right 100px url(zf.jpg);"> 71 11.no-repeat right 100px url(zf.jpg);靠左边,则左为0,x坐标取0,只写上下 72 </div> 73 74 <div style="background:no-repeat 100px bottom url(zf.jpg);"> 75 12.no-repeat 100px bottom url(zf.jpg);靠下(代表上下),所以只用写左右,100px 76 </div> 77 78 <div style="background:no-repeat -50px 50px url(zf.jpg);"> 79 13.no-repeat -50px 50px url(zf.jpg);距离左边-50px,上边50px 80 </div> 81 82 <div style="background:no-repeat -50px url(zf.jpg);"> 83 14.no-repeat -50px 距离左边-50px,上下默认,居中 84 </div> 85 86 <div style="background:no-repeat -50px top url(zf.jpg);"> 87 15.no-repeat -50px top = no-repeat -50px 0px (距离div边界左边-50,上边0px) 88 </div> 89 90 <div style="background:no-repeat left top url(zf.jpg);"> 91 16.no-repeat left top (靠左上,=(0px,0px),=只有no-repeat 92 </div> 93 </body> 94 </html>
这是使用的图片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