CSS| background_属性总结

Property List

属性	描述	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

从表格中，我们可以看出 background-clip ，background-origin和 background-size是css3中新增的属性。

background:

 

简写方式：

background:background-color background-image background-repeat background-attachment background-position / background-size background-origin background-clip

不设置的属性可以省略。

例：

.bBot{background:url(../images20130624/bg.png) no-repeat -1424px -5px;overflow:hidden;height:1px;clear:both;font-size:0px; overflow:hidden;} 
.cBot{background:url(../images20130624/sohubg01.png) 0 -181px repeat-x;width:758px;height:6px;clear:both;font-size:1px;margin:0 auto;} 

 

 

---

---

 

1)  background-attachment  

　　background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。

 

值	描述
scroll	背景图片随页面的其余部分滚动。这是默认
fixed	背景图像是固定的
inherit	指定background-attachment的设置应该从父元素继承

 

 

2)  background-color

background-color 设置背景颜色

值	描述
color	指定背景颜色。在CSS颜色值近可能的寻找一个颜色值的完整列表。
transparent	指定背景颜色应该是透明的。这是默认
inherit	指定背景颜色，应该从父元素继承

 

• 十六进制颜色：      指定一个十六进制的颜色其组成部分是：＃RRGGBB，其中RR（红色），GG（绿色）和BB（蓝色）。所有值必须介于0和FF之间。
• RGB颜色：            RGB颜色值指定：RGB（红，绿，蓝）。每个参数（红色，绿色和蓝色）定义颜色的亮度，可在0和255之间，或一个百分比值（从0％到100％）之间的整数。
• RGBA颜色：         RGBA颜色值指定：RGBA（红，绿，蓝，alpha）。 Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数。
• HSL色彩：            色相是在色轮上的程度（从0到360）-0（或360）是红色的，120是绿色的，240是蓝色的。饱和度是一个百分比值;0％意味着灰色和100％的阴影，是全彩。亮度也是一个百分点;0％是黑色的，100％是白色的。 例：background-color:hsl(120,65%,75%);
• HSLA颜色：          指定HSLA颜色值：HSLA（色调，饱和度，亮度，α），α是Alpha参数定义的不透明度。 Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数。  例：background-color:hsla(120,65%,75%,0.3);

  

3)  background-image：url('URL') | none | inherit  

background-image属性设置一个元素的背景图像。

元素的背景是元素的总大小，包括填充和边界（但不包括边距）。

默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。

提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，可以使用背景色带代替。

 

 　　例：

body{

background-image:url('paper.gif');

background-color:#cccccc;

}

 

4)  background-position

　　background-position属性设置背景图像的起始位置。

left top left center left bottom right top right center right bottom center top center center center bottom	如果仅指定一个关键字，其他值将会是"center"
x% y%	第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％
xpos ypos	第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions
inherit	指定background-position属性设置应该从父元素继承

 

5)  background-repeat

设置如何平铺对象的 background-image 属性。

 

值	说明
repeat	背景图像将向垂直和水平方向重复。这是默认
repeat-x	只有水平位置会重复背景图像
repeat-y	只有垂直位置会重复背景图像
no-repeat	background-image不会重复
inherit	指定background-repea属性设置应该从父元素继承

 

6)  background-clip：border-box | padding-box | content-box | no-clip  

　　 用来确定背景的裁剪区域。

　　

　作用：CSS3中的Background-clip属性，其主要是用来确定背景的裁剪区域，换句话说，就是如何控制元素背景显示区域

 

值	说明
border-box	默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box	背景绘制在衬距方框内（剪切成衬距方框）。
content-box	背景绘制在内容方框内（剪切成内容方框）。

 

background在Box Model中，他是布满整个元素的Box区域的，并不是从padding内部开始，只不过边框部分遮住了部分background，但有一点需要注意，background-color是从元素的边框左上角起到右下角止，
而background-image却不一样，他是从padding边缘的左上角起而到border的右下角边缘止，如果大家对上面那句话不太好理解的话，我们一起来看一个简单的Box Model加上边框和背景色，背景图片的示意图 

 

7)  background-origin：padding-box | border-box | content-box;     

   background-Origin属性指定background-position属性应该是相对位置。注意如果背景图像background-attachment是"固定"，这个属性没有任何效果。

值	描述
padding-box	背景图像填充框的相对位置
border-box	背景图像边界框的相对位置
content-box	背景图像的相对位置的内容框

 

　　

background-origin与background-clip的最根本的区别就是：background-clip 是对背景图片的裁剪，background-origin是对背景图片设置起始点。对于background-clip, 其关键字是指将背景图片以border的尺寸、
以padding的尺寸，以content的尺寸进行切割，其得到的结果是不完整的背景，也就是其中的一部分(原理与截图差不多)。而且有一点要注意，background-clip的切割是对这个容器背景的切割(包括图片与背景颜色)。
对于background-origin，其关键字是指将背景图片放置到border范围内，padding范围内、content范围内，其得到的结果是完整的背景(原理与图片的缩放相似)。与background-clip不同的是，它只是单纯设置背景图
片的边界，并不会对背景颜色造成影响

 

 

8)  background-size： length | percentage | cover | contain  

         

值	描述
length	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage	将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。