极客编程技术分享
HTML5学堂：移动端开发中，背景图需要适应不同的屏幕设备大小。当然CSS3为我们提供了一系列非常不错的背景属性，本文讲解了CSS3背景的使用。
1、background-clip设置背景切割
2、background-origin设置背景原点的起始位置
3、background-size设置背景尺寸。
4、rgba的背景颜色设置方法
5、linear-gradient与radial-gradient渐变背景
clip原意为裁剪，截取。
background-clip的作用为将背景图片做适当的裁剪，以适应需要。根据设置的盒子部位，那么图片在这个部位的外边缘以外的部分都会不可见。
background-clip属性的取值
content-box：表示从内容区开始（width和height部分）
padding- box：表示从内边距区开始（padding部分）
border-box：表示从边框区开始（border部分）
欢迎沟通交流~HTML5学堂
origin意为原点，起始坐标位置，表示背景图的左上角点初始显示位置再哪里。属性值取值和background-clip相同，在此就不再重复书写了。 一定要注意，background-clip与background-origin不能混用~例如：背景图片起始位置是从border-box开始，但background-clip设置的值是content-box，在content之外，也就是border-box内，padding-box内的图片内容将统统不可见。尽管图片是从边框开始显示。
对于背景图片的处理，通常使用background-size进行辅助，background-size: 100%，个人觉得这个是比较好用的属性。background-size需要两个值，它的类型可以是像素（px）、百分比（%）或是auto，还可以是cover和contain。第一个值为背景图的width，另外一个值用于指定背景图上的height，如果只设定1个值，则第2个默认为auto，但当值为cover和contain时除外。
之前一直用cover比较多（保持图像的宽高比例，将图片缩放到正好完全覆盖定义的背景区域，其中有一边和背景相同），今天来重点说一下百分比：当指定为百分比时，大小会由所在区域的宽度、高度，以及background-origin的位置决定。特别注意一下，图片大小不是按背景图片大小的百分数来计算的，而是装载背景图的元素的百分比来计算。
应该说，背景尺寸这个新属性的出现，很好的解决了我们做移动端时遇到的分辨率兼容问题，所以，小伙伴儿们，好好琢磨琢磨background-size吧，肯定会有助于我们书写移动端代码的~~~
在此前，我们表示颜色的方法有三种，分别是rgb(值, 值, 值)、#6位16进制数、英文单词。rgba应该说是在原来rgb的书写方式上扩展了功能。r表示红色值，g表示绿色值、b表示蓝色值，而a表示的是透明度。前面三个值均需要使用整数，取值范围为0~255（含0和255），透明度a取值范围为0~1，是可以使用小数的，但是只能精确到两位小数，0表示的是完全透明，1表示的是完全不透明。如：rgba(255, 0, 0, 1)表示的就是完全不透明的纯红。
渐变，可以理解为由一个颜色变化到另一个颜色。在渐变属性的属性值中应当有起始变化位置、起始颜色、渐变的角度、变化到的百分比位置以及变化到的颜色。渐变分为两种，一种是线性渐变，另一种是径向渐变。当前在移动端基本很少用到渐变，除了其复杂的兼容性问题，还有就是渐变本身对移动端的性能存在一定的影响。加上当前设计风格偏向于扁平化，自然使用渐变的设计师也不多~在此也就不针对渐变背景进行详细讲解了，感兴趣研究的同学，可以百度搜索CSS3渐变在线生成工具~
欢迎沟通交流~HTML5学堂
