在网页设计中，CSS（Cascading Style Sheets）是一种强大的工具，用于定义HTML或XML（包括SVG、XHTML等）文档的呈现方式。本话题主要关注如何利用CSS来控制图片的显示，特别是如何只显示图片的一部分。这在创建图像切片、实现图像滑动效果或者仅展示图片某区域时非常有用。
我们要理解CSS中的`background-image`属性，它允许我们将背景图像设置到元素上。例如：
```css
div {
background-image: url('image.jpg');
}
```
在这个例子中，`div`元素的背景图是`image.jpg`。默认情况下，整张图片会填充或重复铺满元素的背景区域。
要控制图片的显示部分，我们可以使用`background-position`属性来设定图像相对于其包含块的位置。这个属性可以接受百分比、像素值甚至是关键词（如`center`）。例如，如果只想显示图片的右上角20%的部分，可以这样设置：
```css
div {
background-image: url('image.jpg');
background-position: -80% 0;
}
```
这将使背景图片向左偏移80%，保持顶部对齐，从而只显示右侧20%的部分。
为了进一步控制，还可以结合`background-size`属性，限制图片的显示尺寸。比如，我们可能希望图片只显示原尺寸的一半：
```css
div {
background-image: url('image.jpg');
background-position: -80% 0;
background-size: 50%;
}
```
此外，CSS3引入了`clip-path`属性，可以创建更复杂的图像裁剪。通过定义一个形状（如圆形、多边形等），我们可以精确地控制图片的可见部分。例如，裁剪成一个圆形：
```css
img {
clip-path: circle(50%);
}
```
这将使图片显示为圆形，只显示中间的50%区域。
对于动态效果，如图片的渐显或滑动，可以结合CSS的`transition`属性和JavaScript。通过改变`background-position`或`clip-path`的值，可以创建出平滑的动画效果。
例如，当鼠标悬停在图片上时，显示图片的另一部分：
```css
img {
transition: background-position 0.5s ease;
}
img:hover {
background-position: -100px 0; /* 假设原始位置是0 0 */
}
```
这段代码会在鼠标悬停时，用0.5秒的时间平滑地移动图片的背景位置。
CSS提供了多种方式来控制图片的显示，从简单的背景定位到复杂的形状裁剪和动画效果。开发者可以根据需求选择合适的方法，实现个性化的图像展示效果。通过熟练掌握这些技巧，可以提升网页的视觉表现力和用户体验。
