CSS3新属性篇(五)：backgroundsize属性

目录：

• background-size属性介绍


• 演示代码


• background-size属性分析
  
  
  
  • 设置固定尺寸的背景图片
  
  
  • 背景图片的宽高是根据自身所属元素的宽高以百分比进行缩放
  
  
  • 背景图片扩展并覆盖填充满整个所属元素区域
  
  
  • 背景图片尺寸宽度和高度完全适应内容区域
  
  
  
  

一、background-size属性介绍

CSS3 的 background-size 属性能调整背景图片的大小，从而替代了用原始大小显示图片的默认行为。你可以随意的缩放背景图。

用法：background-size: length|percentage|cover|contain;

• length：设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)


• percentage：将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"


• cover：此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。


• contain：此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

二、演示代码

背景图尺寸为220px*214px：

}

三、background-size属性分析

1、设置固定尺寸的背景图片

1）、background-size: 800px 300px;



设置背景图片的宽高比与图片本身的宽高比不同，导致图片出现变形；同时设置背景图片的尺寸远远超出了div本身定义的尺寸，超出的部分被隐藏了。

2）、background-size: 100px 200px;



设置背景图片的宽度远远小于自身的宽度，图片被压缩；同时小于div本身的宽度，无法覆盖全部的div，出现留白。

2、背景图片的宽高是根据自身所属元素的宽高以百分比进行缩放

1）、background-size: 100% 100%;



完全填满所属元素的区域，但是应该宽高的比例图片出现了变形。

2）、background-size: 50% 20%;



填充所属元素的宽50% 高20%的区域，图片出现变形。

3、背景图片扩展并覆盖填充满整个所属元素区域

1）、background-size: cover;



如果背景图片尺寸大于所属元素尺寸，则背景图片不进行方法，正常显示，超出部分被隐藏。

如果背景图片尺寸小于所属元素尺寸，则背景图片进行等比例放大（图片不会出现变形），直至完全覆盖所属元素区域，超出部分被隐藏。

优点是背景图片全部覆盖所属元素区域；缺点是超出的部分会被隐藏。

4、背景图片尺寸宽度和高度完全适应内容区域

1）、background-size: contain;



对背景图片进行等比例的放大/缩小处理，直至背景图片能够完完整整的展示出来。

优点是图片不会出现变形，同时背景图片被完全展示出来；缺点是当所属元素的宽高比与背景图片的宽高比不同时，会出现背景留白。