/ 文档备忘 / 0浏览

[CSS] 背景图自动缩放

CSS 3 属性:background-size

指定背景图片大小
background-size:bg-size , bg-size
bg-size = auto | length | percentage | cover | contain
预设值为auto,即背景图片原始长宽。
length指定图片具体大小的数值,不允许负值。
percentage以背景图所在元素的百分比指定背景图大小,不允许负值。
length与percentage可设定2数值,也可只设定1个数值,当只设定一个数值,另一个数值(高)预设值为auto,此时高度以背景图原始宽高比例,自动缩放。
cover主要用于背景图小于所在的内容,而背景图又不适合使用repeat,此时就可以采用cover的方式,使背景图放大至内容的大小,但此方法容易使背景图因放大而失真。
contain与cover正好相反,主要用于背景图大于所在内容,但却需要将背景图完整呈现,此时就可采用contain的方式,使背景图缩小至内容的大小。