CSS中background样式的repeat和no-repeat

自http://blog.sina.com.cn/s/blog_98eef7830101cv8t.html获取的知识，特此感谢。

 <!DOCTYPE html>

 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta charset="utf-8" />

     <title>New Document</title>

     <meta name="generator" content="EverEdit" />

     <meta name="author" content="" />

     <meta name="keywords" content="" />

     <meta name="description" content="" />

     <style type="text/css">

         div{

             width:400px;

             height:200px;

             padding:8px;

             border:1px solid #96c2f1;

         }

     </style>

 </head>

 <body>

     <div style="width:200px; height:100px; border: 1px solid #ff0000;">

     </div>

     &nbsp;

     <div style="padding:8px;border:1px solid #96c2f1;background:#eff7ff;width:400px">

         <img alt="pic" src="zf.jpg">

     </div>

     &nbsp;

     <div style="background:url(zf.jpg);">

     </div>

     &nbsp;

     <div style="background:repeat-x url(zf.jpg);">

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

     </div>

     &nbsp;

     <div style="background:repeat-y url(zf.jpg);">

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

     </div>

     &nbsp;

     <div style="background:repeat-x 0px 50px url(zf.jpg);">

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

     </div>

     &nbsp;

     <div style="background:repeat 25px 25px url(zf.jpg);">

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

     </div>

     &nbsp;

     <div style="background:repeat-x bottom url(zf.jpg);">

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

     </div>

     &nbsp;

     <div style="background:repeat-x left url(zf.jpg);">

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

     </div>

     &nbsp;

     <div style="background:no-repeat url(zf.jpg);">

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

     </div>

     &nbsp;

     <div style="background:no-repeat top  url(zf.jpg);">

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

     </div>

     &nbsp;

     <div style="background:no-repeat left url(zf.jpg);">

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

     </div>

     &nbsp;

     <div style="background:no-repeat left 100px url(zf.jpg);">

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

     </div>

     &nbsp;

     <div style="background:no-repeat right 100px url(zf.jpg);">

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

     </div>

     &nbsp;

     <div style="background:no-repeat 100px bottom url(zf.jpg);">

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

     </div>

     &nbsp;

     <div style="background:no-repeat -50px 50px url(zf.jpg);">

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

     </div>

     &nbsp;

     <div style="background:no-repeat -50px  url(zf.jpg);">

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

     </div>

     &nbsp;

     <div style="background:no-repeat -50px  top url(zf.jpg);">

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

     </div>

     &nbsp;

     <div style="background:no-repeat left  top url(zf.jpg);">

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

     </div>

 </body>

 </html>

CSS中background样式的repeat和no-repeat-LMLPHP

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

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

CSS中background样式的repeat和no-repeat-LMLPHP

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

REPEAT

CSS中background样式的repeat和no-repeat