CSS中的background用法探讨
CSS中与background相关的属性有9个，他们的描述分别如下
| 属性 | 描述 | CSS |
|---|---|---|
| background | 通过该属性可以指定以下所有属性 | 1 |
| background-attachment | 设置背景图像是否固定或者随着页面的其余部分滚动。 | 1 |
| background-color | 设置元素的背景颜色。 | 1 |
| background-image | 设置元素的背景图像。 | 1 |
| background-position | 设置背景图像的开始位置。 | 1 |
| background-repeat | 设置是否及如何重复背景图像。 | 1 |
| background-clip | 规定背景的绘制区域。 | 3 |
| background-origin | 规定背景图片的定位区域。 | 3 |
| background-size | 规定背景图片的尺寸。 | 3 |
所有的属性影响的范围是：为指定该属性的元素创建的盒子的边框内（包括边框）。也就是说，如果该元素设置了padding属性，那么背景不会出现padding的效果（实例见附录a）。即背景属性的范围是元素内容、内边距和边框区域。
当然，以上所说的影响范围，是默认影响范围，在CSS3之后，可以通过background-clip属性来改变这个范围。
下面一一介绍各个属性的使用情况。由于 background 属性是一个通用的属性，在其中可以指定下面的其他8个属性的内容，我们最后再介绍其用法。剩下的8个属性中，我们最常用的大概就是 background-color 和 background-image 属性了。
background-color属性
该属性设置元素的背景色，属性的值是任何有效的颜色值，如：
background-color: red;background-color: #FF0000;background-color: rgb(255, 0, 0);background-color: rgba(255, 0, 0, 0.5);background-color: hsl(120, 65%, 75%);background-color: hsla(120, 65%, 75%, 0.3);当然，该属性也可以设置成渐变色，具体如何设置详见 附录b。
background-image属性
顾名思义，这个属性设置元素的背景图片。该属性的值是一个url，如：background-image: url('images/1.jpg');background-image: url('images/2.gif');background-image: url('images/3.png');
对于该属性，大家需要知道以下三点：
1.
背景图片可以放置gif动态图，因而产生动态背景。当然，使用png的话，透明效果也能出来。
2.
如果同时设置了background-color 和 background-image属性，两个都会起效果，并且图像会盖在背景色之上。很多书上说background-image的优先级高于background-color，background-color可以在background-image加载过程中，或者加载出错时代替背景图使用，这样的理解是
错误的！细心的你可以发现，背景色和背景图片是同时生效的，只是背景图片层位于背景色层之上，把它盖住了而已。当元素的背景图是png，通过透明背景可以看到设置的背景色；当元素的背景图是gif，通过重复图像之间的间隙可以看到背景色；当元素的背景图是jpg，设置图像不重复（background-repeat: no-repeat;）时，多出来的地方都能看到背景色。
3.
背景图片总是在其他项之后渲染，因此总给人一种载入慢的感觉。并且背景图不能像<img>一样有alt信息，请勿将background-image属性当做<img>标签使用。
background-repeat属性
顾名思义，该属性是设置 背景图片的重复情况。在当前元素的盒子大于背景图片的情况下，背景图片会重复显示来充满盒子。该属性可以设置以下的值：background-repeat: repeat;background-repeat: repeat-x;background-repeat: repeat-y;background-repeat: no-repeat;background-position
如果要改变
背景图片的起始位置，可以通过这个属性设置。该属性可以设置如下：
background-position: 10px 20px;background-position: 10% 20%;
background-position: left;
background-position: right;
background-position: center;
background-position: top;
background-position: bottom;
1.
该属性可以设置1个值或者2个值。仅设置1个值为某一关键词（如：left）时，第二个值默认为center，仅设置一个值为某一个数值值时（如Xpx、Xem、40%），第二个值默认为50%。默认值的效果都是居中。若设置2个值，则两个值分别代表水平和垂直距离。
2.
百分比值和其他数值值可以混用。这也就是为什么仅仅设置一个值为XXpx时，另一个值默认为50%，而不是多少px。
3.
百分比值是控制背景图整体的位置，所以当值为50%时，背景图整体居中，而不是背景图的左边在盒子的中线。
4. 提示：您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作（该提示来自W3School）。
4. 提示：您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作（该提示来自W3School）。
5.
一般用该属性时，最好配合background-repeat: no-repeat使用，除非你还是需要图像重复的平铺效果。
background-attachment属性
该属性用来设置
背景图片是否随着页面滚动。该属性的值可以设置如下：
background-attachment: fixed;background-attachment: scroll;
background-clip属性
该属性用来指定背景的绘制区域，可设置的值如下：
background-clip: border-box;background-clip: padding-box;
background-clip: content-box;
padding-box 的绘制区域包含元素内容和内边距。
content-box 的绘制区域仅包含元素内容。
有的读者会觉得绘制区域包不包括边框区域貌似没有什么区别。其实区别很大，当边框类型
不是solid，宽度较宽的时候，就可以看出区别了。
background-origin属性
该属性是用来规定
背景图片设置的 background-position 属性相对于什么位置来定位的。可设置的值如下：
background-origin: padding-box;background-origin: border-box;
background-origin: content-box;
border-box 表示图像绘制是按边框盒子边距框来定位的。
content-box 表示图像绘制是按内容边距来定位的。
值得注意的是，如果背景图片的 background-attachment 属性为 fixed，则该属性设置无效。
值得注意的是，如果背景图片的 background-attachment 属性为 fixed，则该属性设置无效。
background-size属性
该属性用来指定
背景图片的尺寸。可以设置的值如下：
background-size: 100px 100px;background-size: 50% 50%;
background-size: cover;
background-size: contain;
contain 表示将图片等比例放大致最大以尽量充满背景区域，若和背景区域长宽比不一致，则背景会出现留白。
注意，该属性设置的值为数值或者百分比时，若只给定宽度值，则长度为auto，即图像会等比例缩放，推荐这样做。
当然，给定值时，也可以：
background-size: auto 100px;background属性
该属性能够一次指定多个背景属性，不同属性之间顺序不定，用空格隔开，实例如下：background: #FF0000 url('1.jpg') no-repeat fixed center;
以上就是CSS中关于背景的各个属性，由于CSS是在不断发展中的，因此本文也会随着CSS的发展不断更新。文中一些内容是参照了互联网以及W3School的内容后，经本人实践比对综合分析后得出的结论，所以要在这里感谢各位前辈的知识，只有站在巨人的肩膀上才能够进步。文中也不免会出现一些错误（暂时未发现），欢迎各位朋友多多交流指教。如果有哪些知识点讲述不清，请留言指出。
更新至2015.7.28---------------------------------
附录a
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>testbg</title>
<style>
.outer
{
padding: 10px;
background-color: red;
display: inline-block;
}
.inner
{
border: 1px solid green;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<span class="outer"><div class="inner"></div></span>
</body>
</html>效果：
附录b
请参阅：http://css.doyoe.com/
或百度linear-gradient
扫一扫
8084
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
