CSS controls the display of part of the image_html/css_WEB-ITnose

Usage situation: To prevent repeated requests for image resources, we often use one image to display multiple effects or content.
Suppose I have a picture in the vertical direction of the paper. The vertical y-axis direction is the letters: A, B, C....
Now I want to display the letters A, B, C and so on. Our CSS can be written like this:
The width=20px, height=20px occupied by one letter of the image here;
.mar_wordA {
background: url("../images/ranking.gif") no-repeat scroll 0 0px transparent;
}

.mar_wordB {
background: url("../images/ranking.gif") no-repeat scroll 0 -20px transparent;
}

.mar_wordC {
background: url("../images/ranking.gif") no-repeat scroll 0 -40px transparent;
}
..... ........................
If it is a horizontal picture, just adjust the value of the x-axis.
Note: A container load image is required.

CSS control image display.rar (1.2 KB)