css中的background的几个属性(background-attachment/background-origin,background-clip等)

关于background中的几个属性：

background-orgin

background-clip

background-size

background-position

backround-attachment

三个盒子：border-box|padding-box|content-box

1.background-origin

用来决定背景图片定位在哪个盒子中。(对背景颜色无作用效果)

background-origin:border-box/padding-box/content-box

（默认值为padding-box）

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

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

2.background-position:

用于定位背景图片的位置。默认值为（0% 0%）.如果只取一个值时，那么第二个值为50%。

默认的情况下，背景图片是在padding-box的左上角安家的。background-position可以改变默认位置。

css2.1中用两个数字来控制。(可以有负值)

eg:background-position:10% 10%；

css3中可以四个值来控制。

eg：background-position:right 20px bottom 30px;

含义是背景图片相对于右侧向左偏移20px 相对于底部向上偏移30px

这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。

提示：您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。

3.background-clip:border-box/padding-box/content-box

规定背景的绘制区域（对背景颜色和背景图片同时有效）

默认情况下背景颜色的渲染区域是border-box的左上角到右下角。

背景图片的绘制区域是从padding-box的左上角到border-box的右下角。

4.background-attachment:fixed/scroll(默认)/local（新加的）

当取fixed时，背景图片不随元素的移动而移动,相当于窗体进行固定。

scroll随元素的移动而移动。

local:随内容的移动而移动。

5.background-size：length/percentage/cover/contain

用于规定背景图片的尺寸.,可以用px,也可以用百分比。如果只写一个值，px或者百分比，那么第二个值为auto,是按背景图片的原始高宽比来根据第一个值缩放到相应的尺寸。

cover:放大图片使背景图片完全填充元素，图片的一部分可能无法显示在元素中。

contain:当图片比元素大时，缩小图片使图片完全显示在元素中。元素的一部分可能没有背景填充。当图片比元素小时，图片会放大到图片刚好显示在元素中。

在background-size用percentage做参数时，要根据background-origin来确定大小。

默认的background-origin为padding-box,那么百分比的依据就是（padding+width/height）eg:x%*(padding+width).

如果background-origin为border-box，那么百分比的依据就是（border-width+padding+width/height）.

如果background-origin为content-box,那么background-size为x%*width/height

当background-attachment为fixed时，background-origin会失效，这是背景图片是相对于窗体固定，background-size如果使用百分比做参数，百分比的依据是窗体的大小。

eg:background-size为100% 50%时，那么背景图片的宽为窗体的宽，高为窗体高的一半。

6.background-repeat:(默认值为repeat)

单值的情况：

no-repeat相当于no-repeat no-repeat

repeat相当于repeat  repeat

repeat-x相当于repeat  no-repeat

repeat-y相当于no-repeat repeat

round相当于round round

space相当于space space

当使用round时，会根据情况调整background-size的大小

eg:

元素的大小为450*330，背景图片的大小为140*100

如果background-repeat为round,那么background-size的实际大小就为150*110，background-size会根据round进行调整。

space不会改变背景图片的大小（background-size）,但是会在图片之间添加间隙，来使两端的图片刚好对其边缘。

具体这些初始值参见下表：

background-color	transparent
background-image	none
background-repeat	repeat
background-attachment	scroll
background-position	0% 0%
background-origin	padding-box
background-clip	border-box
background-size	auto

CSS3：background-size背景图片尺寸属性

“蝉原则”与CSS3随机多背景随机圆角等效果

 CSS3 Backgrounds相关介绍