CSS中Background浅析

作为一个有理想有包袱的页面仔，正像鑫哥在这篇文章说说CSS学习中的瓶颈
(强烈推荐)里说的

其实，广大页面屌丝们并不畏惧那些学习能力强的人，畏惧的是那些学习能力强，同时，尼玛学习又拼命的人。
页面仔们，扪心自问下：我每天几点下班？我每天下班后都干嘛了？我有专门花空余时间深入理解学习CSS的一些东西吗？我能够连续坚持数月吗？
最后，我只说一句话：“吃得苦中苦，方为人上人”。

个中滋味，看到这篇文章的人请去链接处细细品读。这篇文章，也是你现在看到的这篇blog的来由。
不说废话，let's rumble。

background的简写支持以下属性:background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, and background-attachment。下面分别解析。

关于background-position和background-size合用

如果同时定义background-position和background-size，必须使用/来分割它们。例子：background:url(smiley.gif) 10px 20px/50px 50px会让background-image离父元素顶部20px,左边10px,同时大小被限制在50px*50px(这里的background-size不同于background-clip，会强制限定背景元素的显示大小，你也可以指定为auto auto,会根据背景图片的原始大小显示。但这里不能指定为initial initial,会报错。

下面来一项一项说明。

background-color

为元素提供一个背景色。默认为transparent。可以使用颜色名，Hex,rgb和rgba等。background-image在会覆盖在其上。为了良好的兼容性，在使用简写形式时最好写在最后一项。W3SCHOOL原文:

If using multiple background-image sources but also want a background-color, the background-color parameter needs to be last in the list.
如果使用多重背景图片和背景颜色，那么背景颜色参数需要在最后一项

background-image

元素的background范围覆盖了content, padding和border，但不包括margin.
格式为background-image:url('URL')。如果想设定多重背景，以comma(,)分割url
注:IE8及之前版本不支持多重background-image

background-position

默认值为0% 0%.
可以简写为属性: background-position:x y; x和y的取值可以有以下形式：

• 关键字：x = [x for x in [left, right, center] y = [x for x in [top, center bottom]]. 咦我是不是一看到这种矩阵就想写generator? 以上表达式翻译成人话就是：x可以取left, right, center中的任意值，y可以取top, center, bottom中的任意值.如果只设置一个值，另一个会被自动设置为'center'

• 百分比:父元素的左上角为0% 0%, 右下角为100% 100%。注意这里的百分比同时被应用在-背景图片元素的定位点到父元素左上角的距离-和-背景图片自身的定位点到背景图片左上角的距离。也就是说，如果我们设置background-position为50% 50%,背景图片会在父元素里居中显示，因为此时背景图片的定位点位于背景图片内部50% 50%处，同时这个定位点和父元素左上角的距离也是(父元素宽度和高度的)50% 50%.关于这一点，在精通CSS第二版的第56页有更加形象和专业的描述

• pixel或者其他任何有效的CSS单位.关于CSS单位，将是下一篇文章要探讨的内容。如果只指定其中一个值，另一个值会被设定为50%. 因此可以和%混用。
  说到这里css sprite技术就很好理解了。通过设定负的px，背景图像的一部分被'拖拽'到父元素之外，从而在父元素之内显示要显示的内容。

background-size

可以设定为：

• auto.为背景元素图片的默认值

• length.任何有效的CSS单位

• percentage.父元素宽度和高度的百分比

可以清楚地看到，随着父元素的拉长，基于父元素百分比的background-size也被拉长了。

• cover.使父元素的最长边被背景图片所覆盖。在父元素的较短边上，可能会截取一部分背景图片。
  

• contain.使父元素的最短边被背景图片所覆盖。在父元素的较长边上，可能会留白。

background-repeat

大家很熟悉的属性了。旧时代常常使用repeat-x和repeat-y加图片切片来实现背景图片的渐变效果。随着CSS3的普及，相信CSS渐变将成为主流。在线的渐变生成器请见本文最后。

background-origin

和CSS中的box-sizing属性很像，只不过box-sizing是用来定义长和宽，background-origin是用来定义背景图片的起始位置。
取值：

• 默认值为padding-box.从padding的左上角开始显示background-image.

• border-box.从border的左上角开始显示。

• content-box. 从content的左上角开始显示
  更多演示

background-clip

和background-origin的取值一样，也有三种:padding-box, border-box和content-box。可以显示background的显示范围。
更好玩的是可以实现background只在text内显示。详见[这篇文章]（http://www.w3cplus.com/content/css3-background-clip）

background-attachment

指定background是否和内容一起滚动

CSS3

linear-gradient

可以直接设定background:linear-gradient。W3C链接
请忘记那些该死的语法吧，专注于设计。使用这些在线生成器来生成渐变代码。
链接1
链接2
链接3

写到这里，感觉自己有点三分钟热情了，内容越写越简略，果然自己还是不适合长时间码字啊。本篇文章会继续更新补充未完成内容，同时向大家推荐一个网站W3Cplus,共同学习！