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

在我们的数字化世界中，有效利用图片资源成为了一个不可忽视的课题。为了避免反复请求图片资源，我们常常采取一种策略：一张图片，多种效果或内容展示。想象一下你有一张沿着竖直方向排列的图片，从上到下分别是字母：A、B、C…… 在这种情况下，我们如何利用CSS来分别展示这些字母呢？

假设图片中每个字母的尺寸都是20px宽，20px高。我们可以通过CSS的背景属性，以及调整背景位置，来实现这一目的。看下面的代码示例：

```css

.mar_wordA {

background: url("../images/ranking.gif") no-repeat scroll 0 0 transparent; / 显示字母A /

}

.mar_wordB {

background: url("../images/ranking.gif") no-repeat scroll 0 -20px transparent; / 显示字母B /

}

.mar_wordC {

background: url("../images/ranking.gif") no-repeat scroll 0 -40px transparent; / 显示字母C /

}

```

这段代码中的关键部分是`background-position`属性。通过调整这个属性的值，我们可以控制图片在容器中的位置，从而显示出我们想要的字母。在这个例子中，我们让背景图片沿着竖直方向移动，每次移动20px，以显示出不同的字母。

如果图片是水平方向的，你只需要调整`background-position`的x轴值即可。这样，你就可以用一张图片来展示多个不同的元素了。但请注意，这种方法需要有一个容器来承载这张图片。

我们还可以通过JavaScript来动态地改变这些CSS样式。例如，使用`cambrian.render('body')`这样的代码，我们可以根据页面的内容或其他因素来动态地应用样式。这使得我们的网页更加灵活和响应式。