css 图片一部分出现

在网页设计中，我们常常需要将图片进行裁剪，只显示其中的一部分。这时候就需要使用CSS来实现了。

首先，我们需要在HTML中插入一张图片。例如：

<img src="example.jpg" alt="Example" />

接下来，使用CSS的background-image属性来将图片作为背景图，并使用background-position属性来指定图片的位置。例如，如果我们想要显示图片的右上角部分：

img {
  display: block;
  width: 400px;
  height: 300px;
  background-image: url(example.jpg);
  background-position: top right;
}

在上面的例子中，我们将img元素设置为块元素，并设置了宽度和高度。然后，使用background-image属性将图片作为背景图，并使用background-position属性将其定位到右上角。

如果我们想要显示图片的左下角部分，可以将background-position属性设置为bottom left。例如：

img {
  display: block;
  width: 400px;
  height: 300px;
  background-image: url(example.jpg);
  background-position: bottom left;
}

通过使用CSS的background-image和background-position属性，我们可以轻松地将图片裁剪并只显示其中的一部分。