CSS中背景样式的重复和不重复

顺晟科技

2022-09-13 12:49:18

自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。以下是效果图。

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

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

上一篇：CSS背景背景说明背景说明下一篇：[转载]如何按比例缩放和自动裁剪图片

网站建设

Css

CSS中背景样式的重复和不重复