修剪背景图像

在CSS3中，还增加了一些新的调整背景图像的属性，例如调整背景图像的大小、设置背景图像的显示区域及裁剪区域等，下面将对这些新属性做详细讲解。

1. 设置背景图像的大小（background-size）

在CSS3中，新增了background-size属性用于控制背景图像的大小，其基本语法格式如下。

background-size:属性值1 属性值2;

在上面的语法格式中，background-size属性可以设置一个或两个值定义背景图像的宽高，其中属性值1为必选属性值，属性值2为可选属性值。属性值可以是像素值、百分比、或“cover”、“contain”关键字，具体解释如表1所示。

表1 background-size属性值

2. 设置背景图像的显示区域（background-origin）

在默认情况下，background-position属性总是以标签左上角为坐标原点定位背景图像，运用CSS3中的background-origin 属性可以改变这种定位方式，自行定义背景图像的相对位置，其基本语法格式如下。

background-origin:属性值;

在上面的语法格式中，background-origin 属性有三种属性值，分别表示不同的含义，具体介绍如下。

● padding-box：背景图像相对于内边距区域来定位。

● border-box：背景图像相对于边框来定位。

● content-box：背景图像相对于内容框来定位。

3. 设置背景图像的裁剪区域（background-clip）

在CSS样式中，background-clip属性用于定义背景图像的裁剪区域，其基本语法格式如下。

background-clip:属性值;

上述语法格式上，background-clip属性和background-origin 属性的取值相似，但含义不同，具体解释如下。

● border-box：默认值，从边框区域向外裁剪背景。

● padding-box：从内边距区域向外裁剪背景。

● content-box：从内容区域向外裁剪背景。