自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>

这是使用的图片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中background样式的repeat和no-repeat的更多相关文章

  1. CSS中background的用法

    CSS中  background 是一个很基本的而且比较常用的样式 background : background-color || background-image || background-re ...

  2. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

  3. CSS中的样式层叠机制Cascade

    CSS中的样式层叠机制Cascade 一.样式冲突   样式冲突是CSS渲染过程要解决的一个关键问题,样式冲突主要由两个原因造成: 元素包含了不同对象所赋予的样式:浏览器.用户.作者.其中,浏览器样式 ...

  4. 如何javascript获取css中的样式

    obj.style.height只能获取行间样式,但是我们要怎么获取写在css文件中的样式呢? 首先我们要用一个新的方法currentStyle.这个方法由current和style两个单词组成意思是 ...

  5. css中background合写样式

    body { background: url("img_tree.png") no-repeat fixed 50% 50%/cover #ffffff ; } 等价于 body ...

  6. CSS中background属性详解

    CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-c ...

  7. CSS中background背景色的作用范围

    在div中设置背景色:当border宽度很大时就要考虑一个问题,那就是背景的作用范围,是包括边框呢?还是不包括呢?很明显,又到浏览器产生分歧的时候了. 在IE中背景色的作用范围为:content+pa ...

  8. CSS中background:url(图片) 不能显示的问题

    刚刚碰到一个奇怪的问题,这样一段CSS代码:   .pho6 { background: url(img/pho6.jpg);  } 这段代码居然不能显示出背景图片,路经绝对是没错的代码肯定没有问题, ...

  9. css中background背景属性概述

    background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/ background:url(背景图片路径) no-repeat center;/*不重复背景图片中间显示 ...

随机推荐

  1. 《零基础学JavaScript(全彩版)》学习笔记

    <零基础学JavaScript(全彩版)>学习笔记 二〇一九年二月九日星期六0时9分 前期: 刚刚学完<零基础学HTML5+CSS3(全彩版)>,准备开始学习JavaScrip ...

  2. Hyperledger Fabric CouchDB as the State Database——使用CouchDB

    使用CouchDB作为状态数据库 状态数据库选项 状态数据库包括LevelDB和CouchDB.LevelDB是嵌入在peer进程中的默认键/值状态数据库,CouchDB是一个可选的外部状态数据库.与 ...

  3. 【RL系列】从蒙特卡罗方法步入真正的强化学习

    蒙特卡罗方法给我的感觉是和Reinforcement Learning: An Introduction的第二章中Bandit问题的解法比较相似,两者皆是通过大量的实验然后估计每个状态动作的平均收益. ...

  4. leetcode个人题解——#40 Combination Sum2

    思路:解法和39题类似,改动了两处: 1.因为题目要求每个元素只能出现一次(不代表每个数只能有一个,因为数据中会有重复的数字),所以代码中21行搜索时下一次循环的位置+1: 2.将临时存放答案的vec ...

  5. HTML5+Bootstrap 学习笔记 4

    HTML5 <map> <area> 标签 <map> 标签定义客户端的图像映射.图像映射是带有可点击区域的图像. <area> 标签定义图像映射内部的 ...

  6. component-scan标签的use-default-filters属性的作用以及原理分析

    一.背景 ​ 我们在Spring+SpringMVC+Mybatis的集成开发中,经常会遇到事务配置不起作用等问题,有时候就是因为包扫描出了问题,其中component-scan的标签的use-def ...

  7. spark RDD、DataFrame、DataSet之间的相互转化

    这三个数据集看似经常用,但是真正归纳总结的时候,很容易说不出来 三个之间的关系与区别参考我的另一篇blog  http://www.cnblogs.com/xjh713/p/7309507.html ...

  8. 如何理解IPD+CMMI+Scrum一体化研发管理解决方案之IPD篇

    如何快速响应市场的变化,如何推出更有竞争力的产品,如何在竞争中脱颖而出,是国内研发企业普遍面临的核心问题,为了解决这些问题,越来越多的企业开始重视创新与研发管理,加强研发过程的规范化,集成产品开发(I ...

  9. OOP 1.2 const关键字

    1.2 const关键字 1.常量 指针常量 定义常量:const 类型 =值 定义指针常量:const *类型=值 常量指针不可通过常量指针修改其指向的内容 可直接修改其指向的内容 常量指针的指向可 ...

  10. HDU 5651 xiaoxin juju needs help 逆元

    题目链接: hdu:http://acm.hdu.edu.cn/showproblem.php?pid=5651 bc:http://bestcoder.hdu.edu.cn/contests/con ...