标签：ant sam webkit gem free 实现 neu embed float
CSS3背景
background是一个使用率很高的属性，也是一个十分有用的属性，能帮助设计师实现一些特殊的效果，使用起来也非常简单。
背景主要包括五个属性：
background-color（背景颜色）background-image（背景图片）background-repeat（背景图片展示方式）background-attachment（背景图片是固定还是滚动）background-position（背景图片位置）可以单独写，也可以将这些属性串在一起使用。
barckground : <background-color> [,<background-image>] [,<background-repeat>] [,<background-attachment>] [,<background-position>]
1、background-color 属性
background-color : transparent || <color>
用来设置元素的背景颜色，其默认值为“transparent，不设置任何颜色情况下是透明色，<color>用来设计背景色彩，常用的颜色格式如下：
2、background-image 属性
background-image : none || <url>
用来设置元素的背景图片，默认值为“none”，<url>是指背景图片的地址，这个地址可以是相对地址，也可以是绝对地址。
3、background-repeat 属性
background-repeat : repeat || repeat-x || repeat-y || no-repeat
用来设置元素的背景图片在元素的盒模型中的铺放格式，其默认值为“repeat”，也就是背景图片沿元素的X轴和Y轴同时平铺，“repeat-x”表示的是元素背景图片沿元素的X轴平铺，Y轴不进行任何铺放；“repeat-y”刚好相反，元素背景图片沿元素的Y轴平铺，X轴不进行任何铺放；“no-repeat”和默认值“repeat”相反，表示背景图片不做任何铺放。
4、background-attachment 属性
background-attachment : scroll || fixed
用来设置元素背景图片是否固定或者随着页面的其余部分滚动，其默认值为“scroll”，表示背景图片会随着浏览器滚动条一起滚动，而取值为“fixed”时，背景图片固定不动（取值为“fixed”时，一般用在html 或 body上，使用在其他标签上不能达到固定效果）。
5、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配合设置，而其中以下几种表示相同定位方式：
"bottom right"，"right bottom"和“100％ 100％”表示在元素右下角位置
在CSS3中，background属性依然保持以前的用法，只是追加了一些与背景相关的属性。
background-origin：指定绘制背景图片的起点background-clip：指定背景图片的显示范围background-size：指定背景图片的尺寸大小background-break：指定内联元素的背景图片进行平铺时的循环方式
<head> <meta charset="UTF-8"> <title>background-position 演示效果</title> <style> *{margin: 0;padding: 0;} body{padding: 100px;} ul{list-style: none;} li{width: 200px;height: 200px;float: left;margin: 20px; background-color: orange; background-image: url(http://7xr9pe.com1.z0.glb.clouddn.com/logo100.jpg); background-repeat: no-repeat; } .no1{background-position: left top;} .no2{background-position: top center;} .no3{background-position: right top;} .no4{background-position: left center;} .no5{background-position: center;} .no6{background-position: right center;} .no7{background-position: bottom left;} .no8{background-position: bottom center;} .no9{background-position: bottom right;} */ </style> </head> <body> <ul> <li class="no1"></li> <li class="no2"></li> <li class="no3"></li> <li class="no4"></li> <li class="no5"></li> <li class="no6"></li> <li class="no7"></li> <li class="no8"></li> <li class="no9"></li> </ul> </body> </html>
标签：ant sam webkit gem free 实现 neu embed float
原文地址：http://www.cnblogs.com/baixc/p/6172184.html
