前端之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;表示背景图片的宽和高也会按照相同比例一直缩放,直到宽或者高中的一个铺满盒子为止。如果高先于宽铺满盒子,则当高铺满盒子的时候,宽和高同时停止缩放。反之,宽先于高时,亦是如此。
原文地址:https://www.cnblogs.com/snow-lanuage/p/10865028.html