首先，我们先来看看两个css属性：background和background-color，对！就是这两位，相信大家在平时应该没少
麻烦人家把，反正我是这样，几乎也少会用到背景图，原因很简单：就是有点害怕用背景图，感觉很繁琐，什么
尺寸啊，位置啊，是否重复啊等等，听着头都大，所以就一直没有去好好地学习一下它，每次碰见就劝自己“下次再
看吧”，然而“明日复明日，明日何其多”，干脆就解决了它
 
background是css背景属性的简写，例如这样：background: #00FF00 url(bgimage.gif) no-repeat fixed top;
但是它又可以拆分成下面的几个子属性：
background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image
 
这些子属性分别代表什么意思呢？下面开始一个个地为大家介绍
 
********************分割线*********************
 
属性一：background-color
如其名，这个属性是设置背景颜色的，有5种可能的值：
1.background-color:red;（已颜色英文名称命名的颜色值）
2.background-color:#ff0000;（十六进制的颜色值）
3.background-color:rgb(255,0,0);(rgb类型的颜色值)
4.background-color:transparent;(默认，背景色为透明)
5.background-color:inherit;（值从父元素继承）
 
当我们单独设置背景颜色时，background-color:red;和background:red;结果是一样的
 
属性二：background-image
该属性是定义背景图片的url，默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复
提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。
使用方法：
background-image:url('demo.jpg');    //url中传入背景图的链接
 
属性三：background-position
该属性设置背景图像的起始位置。
这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。
提示：您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。
 
代码举例：
  1. <style type="text/css">
  2. body
  3. {
  4.   border:1px solid #000;
  5.   background-image:url('/i/eg_bg_03.gif');
  6.   background-repeat:no-repeat;
  7.   background-attachment:fixed;
  8.   background-position:center;
  9. }
  10. </style>
  11. </head>
  12. <body>
  13. <p><b>提示：</b>您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。</p>
  14. </body>
 
运行结果：
 
 
 
属性四：background-size
background-size 属性规定背景图像的尺寸。
 
代码示例：
  1. <style>
  2. body
  3. {
  4. background:url(/i/bg_flower.gif);
  5. background-size:63px 100px;
  6. -moz-background-size:63px 100px; /* 老版本的 Firefox */
  7. background-repeat:no-repeat;
  8. padding-top:80px;
  9. }
  10. </style>
  11. </head>
  12. <body>
  13. <p>上面是缩小的背景图片。</p>
  14. <p>原始图片：<img src="/i/bg_flower.gif" alt="Flowers"></p>
  15. </body>
 
运行结果：
 
 
属性五：background-repeat
background-repeat 属性设置是否及如何重复背景图像。
默认地，背景图像在水平和垂直方向上重复。
 
详细说明
background-repeat 属性定义了图像的平铺模式。
从原图像开始重复，原图像由 background-image 定义，并根据 background-position 的值放置。
提示：背景图像的位置是根据 background-position 属性设置的。如果未规定 background-position 属性，图像会被放置在元素的左上角。
 
 
代码示例：
  1. <style type="text/css">
  2. body
  3. {
  4. border:1px solid #000;
  5. background-image:
  6. url(/i/eg_bg_03.gif);
  7. background-repeat: repeat-y
  8. }
  9. </style>
  10. </head>
  11. <body>
 
运行结果：
 
 
属性六：background-origin

background-origin 属性规定 background-position 属性相对于什么位置来定位。

注释：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。

 
 
代码示例：
  1. <style>
  2. div
  3. {
  4. border:1px solid black;
  5. padding:35px;
  6. background-image:url('/i/bg_flower.gif');
  7. background-repeat:no-repeat;
  8. background-position:left;
  9. }
  10. #div1
  11. {
  12. background-origin:border-box;
  13. }
  14. #div2
  15. {
  16. background-origin:content-box;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <p>background-origin:border-box:</p>
  22. <div id="div1">
  23. 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
  24. </div>
  25. <p>background-origin:content-box:</p>
  26. <div id="div2">
  27. 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
  28. </div>
  29. </body>
 
运行结果：
 
 
属性七：background-clip
background-clip属性规定背景的绘制区域
 
 
代码示例：
  1. <style>
  2. div
  3. {
  4. width:300px;
  5. height:300px;
  6. padding:50px;
  7. background-color:yellow;
  8. background-clip:content-box;
  9. border:2px solid #92b901;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <div>
  15. 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
  16. 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
  17. 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
  18. 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
  19. 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
  20. 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
  21. </div>
  22. </body>
 
运行结果：
 
 
属性八：background-attachment
background-attachment规定如何设置固定的背景图像
 
 
代码示例：
  1. <style type="text/css">
  2. body
  3. {
  4. background-image:url(/i/eg_bg_02.gif);
  5. background-repeat:no-repeat;
  6. background-attachment:fixed
  7. }
  8. </style>
  9. </head>
  10. <body>
  11. <p>图像不会随页面的其余部分滚动。</p>
  12. <p>图像不会随页面的其余部分滚动。</p>
  13. <p>图像不会随页面的其余部分滚动。</p>
  14. <p>图像不会随页面的其余部分滚动。</p>
  15. <p>图像不会随页面的其余部分滚动。</p>
  16. <p>图像不会随页面的其余部分滚动。</p>
  17. <p>图像不会随页面的其余部分滚动。</p>
  18. <p>图像不会随页面的其余部分滚动。</p>
  19. <p>图像不会随页面的其余部分滚动。</p>
  20. <p>图像不会随页面的其余部分滚动。</p>
  21. <p>图像不会随页面的其余部分滚动。</p>
  22. <p>图像不会随页面的其余部分滚动。</p>
  23. <p>图像不会随页面的其余部分滚动。</p>
  24. <p>图像不会随页面的其余部分滚动。</p>
  25. <p>图像不会随页面的其余部分滚动。</p>
  26. <p>图像不会随页面的其余部分滚动。</p>
  27. <p>图像不会随页面的其余部分滚动。</p>
  28. <p>图像不会随页面的其余部分滚动。</p>
  29. <p>图像不会随页面的其余部分滚动。</p>
  30. <p>图像不会随页面的其余部分滚动。</p>
  31. <p>图像不会随页面的其余部分滚动。</p>
  32. <p>图像不会随页面的其余部分滚动。</p>
  33. <p>图像不会随页面的其余部分滚动。</p>
  34. <p>图像不会随页面的其余部分滚动。</p>
  35. </body>
 
运行结果：
 
 
注意红框里面的滚动条，实际运行时，页面滚动，背景不跟随滚动，但是现在的截图看不出效果，所以对不起各位了
 
 
最后，我们将这些属性合并到background一个属性中写一个实例
代码：
  1. <style type="text/css">
  2. body
  3. {
  4. background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;
  5. }
  6. </style>
  7. </head>
  8. <body>
  9. <p>这是一些文本。</p>
  10. <p>这是一些文本。</p>
  11. <p>这是一些文本。</p>
  12. <p>这是一些文本。</p>
  13. <p>这是一些文本。</p>
  14. <p>这是一些文本。</p>
  15. <p>这是一些文本。</p>
  16. <p>这是一些文本。</p>
  17. <p>这是一些文本。</p>
  18. <p>这是一些文本。</p>
  19. <p>这是一些文本。</p>
  20. <p>这是一些文本。</p>
  21. <p>这是一些文本。</p>
  22. <p>这是一些文本。</p>
  23. <p>这是一些文本。</p>
  24. <p>这是一些文本。</p>
  25. <p>这是一些文本。</p>
  26. <p>这是一些文本。</p>
  27. <p>这是一些文本。</p>
  28. <p>这是一些文本。</p>
  29. <p>这是一些文本。</p>
  30. <p>这是一些文本。</p>
  31. <p>这是一些文本。</p>
  32. <p>这是一些文本。</p>
  33. </body>

运行结果：

 
 
 
结语：可能大家觉得我这篇文章只是在复制粘贴，没什么意义，确实如此，当我写到一半时，自己就在想放弃，但是
现在想起来，幸亏当时没有把那一半删掉，因为，在写的整个过程中，我先要看一遍w3school的帮助文档，结果还真
是收获不少。世上没有完全徒劳的事情，我坚信这一点，所以谨以此篇文章作为以后工作的参考
 

CSS探案之 background背景属性剖析的更多相关文章

  1. css中background背景属性概

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

  2. CSS样式表之background背景

    [CSS常用背景属性]:background (缩写形式) background-color:背景色 background-image:背景图  url中放图片地址,背景图和背景色同时存在时,背景图覆 ...

  3. background——背景属性

    一.背景属性 1.1.背景颜色background-color <style> /*浮动,横向排列*/ div{float: left;} /*background-color属性值支持三 ...

  4. css中background背景属性概述

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

  5. css background 背景知识详解

    background 背景属性 我们知道元素有前景色color,与之对应的还有背景色,通过background我们可以为元素添加实色(background-color)和任意多个背景图片(backgr ...

  6. CSS背景属性Background详解

    [转] 本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. CSS2 中有5个主要的背景(b ...

  7. CSS下背景属性background的使用方法

    背景颜色(background-color) CSS可以用纯色来作为背景,也可以将背景设置为透明,background相当于xhtml中的bgcolor. 它的两个值: transparent(默认值 ...

  8. CSS代码示例-背景属性(background)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. CSS（九）：background（背景属性）

    通过CSS背景属性,可以给页面元素添加背景样式. 背景属性可以设置背景颜色.背景图片.背景平铺.背景图像固定等. background-color(背景颜色) background-color属性定义 ...

随机推荐

  1. powerdesigner Oracle.sql转mysql.sql

    将要导入的库的所有表的表结构(不要表数据,只要表结构)导出成一个.sql文件. 在PowerDesinger里找到 File -->> Reverse Engineer --->&g ...

  2. MySQL（数据库）

    数据库概念: 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库在实际应用中会遇到各式各样的数据库如nosql非关系数据库(memcached,redis,mangodb),RDBM ...

  3. Cable master（二分-求可行解）

    Inhabitants of the Wonderland have decided to hold a regional programming contest. The Judging Commi ...

  4. 【原】Coursera—Andrew Ng机器学习—Week 1 习题—Linear Regression with One Variable 单变量线性回归

    Question 1 Consider the problem of predicting how well a student does in her second year of college/ ...

  5. 01 java断言assert初步使用：断言开启、断言使用

    参考文件:http://blog.sina.com.cn/s/blog_59c9412d0100fd55.html 1 说明 java断言assert是jdk1.4引入的. jvm断言默认是关闭的. ...

  6. 1 JPA入门----项目搭建以及CRUD

    maven搭建JPA开发环境 1 依赖的maven pom文件     主要有hibernate-core.hibernate-entitymanager.javax-persistence.mysq ...

  7. 3-No resource found that matches the given name 'Theme.AppCompat.Light 的完美解决方案

    转载:http://www.360doc.com/content/15/0316/15/9200790_455576135.shtml 由于我在配置安卓环境时也碰到了类似问题,用这篇博客解决了主要问题 ...

  8. UOJ#46. 【清华集训2014】玄学

    传送门 分析 清华集训真的不是人做的啊嘤嘤嘤 我们可以考虑按操作时间把每个操作存进线段树里 如果现在点x正好使一个整块区间的右端点则更新代表这个区间的点 我们不难发现一个区间会因为不同的操作被分成若干 ...

  9. js精度（摘）

    Math.formatFloat = function (f, digit) {    var m = Math.pow(10, digit);    return parseInt(f * m, 1 ...

  10. Entity Framework 6.0 Tutorials（6）：Transaction support

    Transaction support: Entity Framework by default wraps Insert, Update or Delete operation in a trans ...