认识CSS3中的背景

前端之HTML5，CSS3（七）

 　　背景缩放

　　CSS3中背景用于手机端须要分系统：ios系统和android系统。对于iso系统，须要背景是2倍宽高像素的背景图，而后背景缩放，如此在ios系统中打开才会不致使图片失真。简单来讲，就是ios系统自带背景放大功能，当设置背景为原图大小时，ios系统打开会对背景图片进行2倍放大，然而通常像素放大会产生失真效果，即模糊效果。所以，须要对背景先缩小，再经过ios系统打开，即为原图大小。

　　background-size属性

　　经过background-size属性设置背景图片大小，如同HTML中img经过css设置width和height通常。属性值：长度(px)或者百分比，cover，contain。

　　长度或者百分比：设置长度或者百分比时，background-size设置两个值，分别为宽(width)和高(height)，基本语法为background-size: mpx npx，其中m为宽，n为高。此外，设置百分比属性须要根据容纳背景的盒子来做为参照，如background-size: 50% 100%，表示背景图片设置宽度为盒子宽度的一半，高度与盒子高度相同。注意，当background-size只设定一个属性值时，另外一个缺省值为auto，表示按照设定值与原始背景图片尺寸大小比例进行等比例缩放。

　　cover：设置方式为background-size: cover；表示背景图片的宽和高会按照相同比例一直缩放，直到宽和高都铺满整个背景盒子为止。若是宽先于高铺满整个背景盒子，宽仍旧会继续缩放，直到高铺满整个盒子的高度时，宽和高同时中止缩放，背景图片的宽会溢出盒子，而溢出盒子的部分会自动隐藏。反之，高先于宽时，亦是如此。

　　contain：设置方式为background-size: contain；表示背景图片的宽和高也会按照相同比例一直缩放，直到宽或者高中的一个铺满盒子为止。若是高先于宽铺满盒子，则当高铺满盒子的时候，宽和高同时中止缩放。反之，宽先于高时，亦是如此。