contain:自动将背景图像填满元素的其中一边,图像的比例保持不变。(也就是说,图像多大,元素则等比例缩放填充图像。) cover:在保持图像原始比例的情况下,将元素的背景区域完全覆盖,超出元素宽高的部分会自动被裁剪,是一种比较“智能”的背景图片大小设置方式,通过配合“background-position”属性使用可以将开发者认为背景图像中“更重要”的部分通过定位显示出来。等价于100%或100%,100%。 百分比值:用“百分比”作为值,结构和用“像素值”一致,也是两个值,第一个值是相对于元素宽度的百分比值,第二个值是相对于元素高度的百分比。如:“100% 80%”、“100% auto”或“auto 50%”。 像素值:可以通过像素“px”精确地设置背景图片的大小。需要设置为两个值,第一个值表示背景图的宽度,第二个值表示背景图的高度,还可以通过设置宽度或高度的其中一个,将另外一个值设置成“auto”达到保持背景图原始图像比例的效果。如:“240px 120px”、“180px auto”或“auto”(等价于auto auto相当于还原默认的大小)”。 参考demo。
contain:自动将背景图像填满元素的其中一边,图像的比例保持不变。(也就是说,图像多大,元素则等比例缩放填充图像。)
cover:在保持图像原始比例的情况下,将元素的背景区域完全覆盖,超出元素宽高的部分会自动被裁剪,是一种比较“智能”的背景图片大小设置方式,通过配合“background-position”属性使用可以将开发者认为背景图像中“更重要”的部分通过定位显示出来。等价于100%或100%,100%。
百分比值:用“百分比”作为值,结构和用“像素值”一致,也是两个值,第一个值是相对于元素宽度的百分比值,第二个值是相对于元素高度的百分比。如:“100% 80%”、“100% auto”或“auto 50%”。
像素值:可以通过像素“px”精确地设置背景图片的大小。需要设置为两个值,第一个值表示背景图的宽度,第二个值表示背景图的高度,还可以通过设置宽度或高度的其中一个,将另外一个值设置成“auto”达到保持背景图原始图像比例的效果。如:“240px 120px”、“180px auto”或“auto”(等价于auto auto相当于还原默认的大小)”。
参考demo。