CSS background 控制显示图片的一部分

当我们设置背景图片时，有时候我们只需要显示图片的一部分，而不是全部图片。这时候可以利用CSS的background属性来完成这个需求。

当我们设置背景图片时，有时候我们只需要显示图片的一部分，而不是全部图片。这时候可以利用CSS的background属性来完成这个需求。

具体来说，CSS的background属性有以下具体的子属性可以帮助我们控制显示图片的一部分：

1. background-image: 设置背景图片。
2. background-position: 设置背景图片的位置，可以用关键字或百分比值指定。
3. background-size: 设置背景图片的大小。

接下来我们通过两个示例来详细讲解如何利用这三个子属性来控制显示图片的一部分。

示例1：

假设我们有一张宽为1200像素，高为800像素的图片，而我们只想要显示图片的左上角400x400像素的部分，可以按照以下步骤来设置：

1. 首先设置背景图片为我们需要的图片：

div {
  background-image: url(example.jpg);
}

1. 然后设置背景图片的位置为左上角，可以用background-position属性的关键字left top来指定：

div {
  background-image: url(example.jpg);
  background-position: left top;
}

1. 最后设置背景图片的大小为我们需要显示的400x400像素大小，可以用background-size属性来指定：

div {
  background-image: url(example.jpg);
  background-position: left top;
  background-size: 400px 400px;
}

这样就可以只显示图片的左上角400x400像素的部分了。

示例2：

假设我们有一张宽为1200像素，高为800像素的图片，而我们想要显示图片的中间800x800像素的部分，可以按照以下步骤来设置：

1. 首先设置背景图片为我们需要的图片：

div {
  background-image: url(example.jpg);
}

1. 然后设置背景图片的位置为图片的左上角顶点向左移动200像素和向上移动200像素所在的位置，可以用background-position属性的百分比值来指定：

div {
  background-image: url(example.jpg);
  background-position: -16.6% -16.6%;
}

这里为什么是16.6%呢？因为我们要向左边和上面各移动200像素，而图片宽度和高度分别是1200像素和800像素，所以我们要向左移动200/1200=16.6%的宽度，向上移动200/800=16.6%的高度。

1. 最后设置背景图片的大小为我们需要显示的800x800像素大小，可以用background-size属性来指定：

div {
  background-image: url(example.jpg);
  background-position: -16.6% -16.6%;
  background-size: 800px 800px;
}

这样就可以只显示图片的中间800x800像素的部分了。

以上就是利用CSS的background属性来控制显示图片的一部分的完整攻略。通过设置背景图片、背景图片的位置和背景图片的大小三个子属性，我们可以比较容易地完成这个需求。