首先，我们先来看看两个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 中正常工作。
代码举例：
<style type="text/css"> body { border:1px solid #000; background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-attachment:fixed; background-position:center; } </style> </head> <body> <p><b>提示：</b>您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。</p> </body>
运行结果：
属性四：background-size
background-size 属性规定背景图像的尺寸。
代码示例：
<style> body { background:url(/i/bg_flower.gif); background-size:63px 100px; -moz-background-size:63px 100px; /* 老版本的 Firefox */ background-repeat:no-repeat; padding-top:80px; } </style> </head> <body> <p>上面是缩小的背景图片。</p> <p>原始图片：<img src="/i/bg_flower.gif" alt="Flowers"></p> </body>
运行结果：
属性五：background-repeat
background-repeat 属性设置是否及如何重复背景图像。
默认地，背景图像在水平和垂直方向上重复。
详细说明
background-repeat 属性定义了图像的平铺模式。
从原图像开始重复，原图像由 background-image 定义，并根据 background-position 的值放置。
提示：背景图像的位置是根据 background-position 属性设置的。如果未规定 background-position 属性，图像会被放置在元素的左上角。
代码示例：
<style type="text/css"> body { border:1px solid #000; background-image: url(/i/eg_bg_03.gif); background-repeat: repeat-y } </style> </head> <body>
运行结果：
属性六：background-origin
background-origin 属性规定 background-position 属性相对于什么位置来定位。
注释：如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。
代码示例：
<style> div { border:1px solid black; padding:35px; background-image:url('/i/bg_flower.gif'); background-repeat:no-repeat; background-position:left; } #div1 { background-origin:border-box; } #div2 { background-origin:content-box; } </style> </head> <body> <p>background-origin:border-box:</p> <div id="div1"> 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 </div> <p>background-origin:content-box:</p> <div id="div2"> 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 </div> </body>
运行结果：
属性七：background-clip
background-clip属性规定背景的绘制区域
代码示例：
<style> div { width:300px; height:300px; padding:50px; background-color:yellow; background-clip:content-box; border:2px solid #92b901; } </style> </head> <body> <div> 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 </div> </body>
运行结果：
属性八：background-attachment
background-attachment规定如何设置固定的背景图像
代码示例：
<style type="text/css"> body { background-image:url(/i/eg_bg_02.gif); background-repeat:no-repeat; background-attachment:fixed } </style> </head> <body> <p>图像不会随页面的其余部分滚动。</p> <p>图像不会随页面的其余部分滚动。</p> <p>图像不会随页面的其余部分滚动。</p> <p>图像不会随页面的其余部分滚动。</p> <p>图像不会随页面的其余部分滚动。</p> <p>图像不会随页面的其余部分滚动。</p> <p>图像不会随页面的其余部分滚动。</p> <p>图像不会随页面的其余部分滚动。</p> <p>图像不会随页面的其余部分滚动。</p> <p>图像不会随页面的其余部分滚动。</p> <p>图像不会随页面的其余部分滚动。</p> <p>图像不会随页面的其余部分滚动。</p> <p>图像不会随页面的其余部分滚动。</p> <p>图像不会随页面的其余部分滚动。</p> <p>图像不会随页面的其余部分滚动。</p> <p>图像不会随页面的其余部分滚动。</p> <p>图像不会随页面的其余部分滚动。</p> <p>图像不会随页面的其余部分滚动。</p> <p>图像不会随页面的其余部分滚动。</p> <p>图像不会随页面的其余部分滚动。</p> <p>图像不会随页面的其余部分滚动。</p> <p>图像不会随页面的其余部分滚动。</p> <p>图像不会随页面的其余部分滚动。</p> <p>图像不会随页面的其余部分滚动。</p> </body>
运行结果：
注意红框里面的滚动条，实际运行时，页面滚动，背景不跟随滚动，但是现在的截图看不出效果，所以对不起各位了
最后，我们将这些属性合并到background一个属性中写一个实例
代码：
<style type="text/css"> body { background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center; } </style> </head> <body> <p>这是一些文本。</p> <p>这是一些文本。</p> <p>这是一些文本。</p> <p>这是一些文本。</p> <p>这是一些文本。</p> <p>这是一些文本。</p> <p>这是一些文本。</p> <p>这是一些文本。</p> <p>这是一些文本。</p> <p>这是一些文本。</p> <p>这是一些文本。</p> <p>这是一些文本。</p> <p>这是一些文本。</p> <p>这是一些文本。</p> <p>这是一些文本。</p> <p>这是一些文本。</p> <p>这是一些文本。</p> <p>这是一些文本。</p> <p>这是一些文本。</p> <p>这是一些文本。</p> <p>这是一些文本。</p> <p>这是一些文本。</p> <p>这是一些文本。</p> <p>这是一些文本。</p> </body>
运行结果：
结语：可能大家觉得我这篇文章只是在复制粘贴，没什么意义，确实如此，当我写到一半时，自己就在想放弃，但是
现在想起来，幸亏当时没有把那一半删掉，因为，在写的整个过程中，我先要看一遍w3school的帮助文档，结果还真
是收获不少。世上没有完全徒劳的事情，我坚信这一点，所以谨以此篇文章作为以后工作的参考