CSS的background特性及CSS3的情况照片设定总结

在css中，共有以下几个background特性
特性 叙述 CSS background 在1个申明中设定全部的情况特性。 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中新增的特性。

用来明确情况的剪裁地区。
模块种类 Gecko Webkit Presto：

注：本特性不适用IE6,7,8
1张图看懂3个特性值的差别：

cover： 把情况图象拓展至充足大，以使情况图象彻底遮盖情况地区。
情况图象的一些一部分或许没法显示信息在情况精准定位地区中。
contain ：把图象图象拓展至最大规格，以使其宽度和高宽比彻底融入內容地区。

赋值：
border： 从border地区刚开始显示信息情况。
padding： 从padding地区刚开始显示信息情况。
content： 从content地区刚开始显示信息情况。

CSS3的情况照片设定
1. 情况照片起止部位 background-origin

background-origin 值 border-box 边框 padding-box 内边距（默认设置值） content-box 內容地区
background-origin ： border-box | padding-box | content-box;
留意: 情况务必设为no-repeat
2. 情况照片剪裁 background-clip

background-clip 值 border-box 边框（默认设置值） padding-box 内边距 content-box 內容地区 no-clip 不剪裁,与border-box实际效果同样

3. 设定情况照片的尺寸 background-size

background-size 值 auto 默认设置值，不更改情况照片的初始高宽比和宽度 长度值 成对出現如200px 50px, 只设定1个值, 等占比放缩 百分比 0％~100％之间的任何值, 只设定1个值, 等占比放缩 cover 遮盖, 将情况图象等比放缩到彻底遮盖器皿，情况图象有将会超过器皿。 contain 容下, 将情况图象等比放缩到宽度或高宽比与器皿的宽度或高宽比相同，情况图象自始至终被包括在器皿内。