CSS中background样式的repeat和no-repeat

自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     &nbsp;
23     <div style="padding:8px;border:1px solid #96c2f1;background:#eff7ff;width:400px">
24         <img alt="pic" src="zf.jpg">
25     </div>
26     &nbsp;
27     <div style="background:url(zf.jpg);">
28     </div>
29     &nbsp;
30     <div style="background:repeat-x url(zf.jpg);">
31         1.repeat-x url(zf.jpg);
32     </div>
33     &nbsp;
34     <div style="background:repeat-y url(zf.jpg);">
35         2.repeat-y url(zf.jpg);
36     </div>
37     &nbsp;
38     <div style="background:repeat-x 0px 50px url(zf.jpg);">
39         3.repeat-x 0px 50px url(zf.jpg);
40     </div>
41     &nbsp;
42     <div style="background:repeat 25px 25px url(zf.jpg);">
43         4.repeat 25px 25px url(zf.jpg);
44     </div>
45     &nbsp;
46     <div style="background:repeat-x bottom url(zf.jpg);">
47         5.repeat-x bottom url(zf.jpg);
48     </div>
49     &nbsp;
50     <div style="background:repeat-x left url(zf.jpg);">
51         6.repeat-x left url(zf.jpg);
52     </div>
53     &nbsp;
54     <div style="background:no-repeat url(zf.jpg);">
55         7.no-repeat url(zf.jpg);
56     </div>
57     &nbsp;
58     <div style="background:no-repeat top  url(zf.jpg);">
59         8.no-repeat top url(zf.jpg);
60     </div>
61     &nbsp;
62     <div style="background:no-repeat left url(zf.jpg);">
63         9.no-repeat left url(zf.jpg);
64     </div>
65     &nbsp;
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     &nbsp;
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     &nbsp;
74     <div style="background:no-repeat 100px bottom url(zf.jpg);">
75         12.no-repeat 100px bottom url(zf.jpg);靠下（代表上下），所以只用写左右，100px
76     </div>
77     &nbsp;
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     &nbsp;
82     <div style="background:no-repeat -50px  url(zf.jpg);">
83         14.no-repeat -50px 距离左边-50px，上下默认，居中
84     </div>
85     &nbsp;
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     &nbsp;
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。以下是效果图。

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

 
 
pic
 
 
 
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
posted @ 2016-12-14 11:08  叶缓  阅读(22106)  评论(0)  编辑  收藏  举报