标签：图像 计算 color 开始 enter height 右上角 back idt
一、设置背景色：background-color
background-color: transparent || <color>
background-color其主要用来设置元素的背景颜色，其默认值为transparent（不设置任何颜色情况下是透明色），<color>用来设置背景色彩，常用的颜色格式为：颜色名：如“red”；rgb色:如rgb(255, 0, 0)或rgb(100%, 0%, 0%)；hls值hsl(0, 100%, 50%)，二进制值 #FF0000。在支持CSS3的浏览器中还可以使用rgba值rgba(255,0,0,1)。
二、设置背景图片:background-image
background-image: none || <url>
background-image其主要用来设置元素的背景图片，默认值为none，<url>是指背景图片的地址，这个地址可以是相对地址，也可以是绝对地址。
三、设置背景图片重复：background-repeat
background-repeat: repeat || repeat-x || repeat-y || no-repeat
background-repeat是用来设置background-image在元素中的铺放格式的，其默认为repeat，也就是背景图片沿元素的X轴和Ｙ轴同时平铺，另外几个值分别表示repeat-x：背景图片仅沿Ｘ轴水平平铺，repeat-y背景图片仅沿Ｙ轴平铺，no-repeat表示背景图片不做任何铺放格式设置。
四、设置背景图像是否固定或者随着页面的其余部分滚动:background-attachment
background-attachment: scroll || fixed
background-attachment主要是用来设置背景图像是否固定或者随着页面的其余部分滚动，，其默认值为scroll，表示背景图片会随滚动条一起滚动，而取值fixed时，背景图片固定不动。
五、设置背景图片的位置background-position
background-position: <percentage> || <length> || [left|center|right][,top|center|bottom]
background-position主要是用为设置背景图片的位置，其默认值为(0,0)||(0%,0%)||(left top),可以进行具体的百分数或数值设置，也可以使用left, center, top, right, top, bottom配合设置，而其中以下几种表示相同定位方式：
"top left","left top"和"0% 0%","0,0"代表元素的左上角；
"top","top center","center top"和"50% 0"表示在元素顶边居中位置；
"right top","top right"和"100% 0"代元素的是元素的右上角位置；
"left","left center","center left"和"0% 50%"表示在元素左边中间位置；
"center","center center"和"50% 50%"表示在元素中间位置；
"right","right center","center,right"和"100% 50%"表示在元素右边中间位置；
"bottom left","left bottom"和"0% 100%"表示在元素的左下角；
"bottom","bottom center","center bottom"和"50% 100%"表示在元素的底下中间点位置；
"bottom right"，"right bottom"和“100％ 100％”表示在元素右下角位置
六、设置背景图片大小background-size
background-size: auto || <length> || <percentage> || cover || contain
取值说明：
1、auto:此值为默认值，保持背景图片的原始高度和宽度；
2、<length>此值设置具体的值，可以改变背景图片的大小；
3、<percentage>此值为百分值，可以是0％?100％之间任何值，但此值只能应用在块元素上，所设置百分值将使用背景图片大小根据所在元素的宽度的百分比来计算。
有一点需要特别注意，图片大小不是按背景图片大小的百分数来计算，而是装截背景图的元素百分比计算，div容器的大小是200px的宽100px的高，此时的背景图片大小将根据div.demo的宽和高的百分比计算，这样一来，背景图片的宽就是200px*80%等 于160px;而背景图片的高同样是100px*50%等于50px；如果有内边距的话还需要加上padding的值一起计算。另外当其只取一个值时，那么宽度和高度将相同，相当于background-size: 80％ auto。
4、cover：此值是将图片放大，以适合铺满整个容器，这个主要运用在，当图片小于容器时，又无法使用background-repeat来实现时，我们就可以采用cover;将背景图片放大到适合容器的大小，但这种方法会使用背景图片失真；
5、contain:此值刚好与cover相反，其主要是将背景图片缩小，以适合铺满整个容器，这个主要运用在，当背景图片大于元素容器时，而又需要将背景图片全部显示出来，此时我们就可以使用contain将图片缩小到适合容器大小为止，这种方法同样会使用图片失真。
当background-size取值为<length>和<percentage>时可以设置两个值，也可以设置一个值，当只取一个值时，第二个值相当于auto，但这里的auto并不会使背景图片的高度保持自己原始高度，而会与第一个值相同。
1>background-size和其他的一些CSS3属性一样，需要加上自己的别名
2>在ＩＥ中有一个滤镜是类似于cover的功能，
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../images/background-image.jpg’, sizingMethod=’scale’);
-ms-filter: “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../images/background-image.jpg’, sizingMethod=’scale’)”;
如果使用滤镜的话，background-size:cover；只有在IE6中不支持了
3>只有当background-size值为auto时，背景图片才不会变形失真，而其他值都会造成背景图片变形失真。
七、设置背景的裁剪区域background-clip
background-clip ： border-box || padding-box || content-box
取值说明：
1、border-box:此值为默认值，背景从border区域向外裁剪，也就是超出部分将被裁剪掉；
2、padding-box：背景从padding区域向外裁剪，超过padding区域的背景将被裁剪掉；
3、context-box：背景从content区域向外裁剪，超过context区域的背景将被裁剪掉；
background在Box Model中，他是布满整个元素的Box区域的，并不是从padding内部开始，只不过边框部分遮住了部分background，但有一点需要注意，background-color是从元素的边框左上角起到右下角止，而background-image却不一样，他是从padding边缘的左上角起而到border的右下角边缘止.即元素background-color原点位置是在Border的外边缘处，而background-image的原点是在元素的padding外边缘处（也就是在元素border的内边缘处）
.demo {
width: 220px;
height: 115px;
padding: 20px;
border: 20px dashed rgba(255,0,0,0.8);
background: green url("../images/box-shadow-img.png") no-repeat;
font-size: 16px;
font-weight: bold;
color: red;
}
下面的效果就更清晰的说明了上面那句话：
但如何能让他们在统一的位置显示呢？background-clip，这个属性就会让背景色和背景图片统一在相同的位置，前面也简单说过，background-clip会根据不同的属性值进行裁剪多了的背景部分。
background-clip和background-size一样，在各种浏览器内核下，都具有自己的私有前缀，但background-clip在Mozilla下分得特别的细，那么先来看看background-clip在Mozilla下的语法规则：Mozilla内核（如Firefox）在3.6版本以下是不支持border-box;padding-box;content-box的语法规则，其语法如下：
1、Firefox3.6版本以下（包含3.6版本）：
-moz-background-clip: border || padding /* Gecko 1.2-1.9.2 (Firefox 1.0-3.6) */
2、Firefox4.0版本以上：
Firefox4.0版本以上，支持border-box,padding-box,content-box并且无需带上其前缀，如果你一不小心带上了“-moz”，那么在Firefox4.0+版本反而是一种错误的写法
background-clip: border-box || padding-box || content-box /*Firefox 4.0+ (Gecko)*/
详细的大家可以到Mozilla.org查看background-clip | -moz-background-clip。虽然网上介绍Opera在9.6+版本就支持-o-background-clip属性的使用，但其实是存在bug的，直到Opera11才正式支持。如此一来，background-clip兼容各浏览器的正确写法应该如下：
/*Firefox3.6-*/ -moz-background-clip: border || padding; /*Webkit*/ -webkit-background-clip: border-box || padding-box || context-box; /*W3C标准 IE9+ and Firefox4.0+*/ background-clip: border-box || padding-box || context-box;
八、设置背景图片的定位原点background-origin
background-origin主要就是用来决定背景图片的定位原点，换句话说就是背景图片定位的起点（background-position的原点）
---恢复内容结束---
标签：图像 计算 color 开始 enter height 右上角 back idt
原文地址：http://www.cnblogs.com/yuxingyoucan/p/6040127.html
