CSS controls part of the display image, and CSS controls the display image

CSS controls part of the display image, and CSS controls the display image
Usage: to prevent repeated requests to image resources, we often use a single image for multiple effects or content display.
Assume that I have an image in the vertical direction of the paper. The vertical Y axis has letters A, B, and C ....
Now we want to display letters A, B, C, and so on separately. Our CSS can be written as follows:
The width of a letter in the image is 20px and the height is 20px;
. 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 the image is in the horizontal direction, adjust the value of the X axis.
Note: container load images are required.

• CSS-controlled Image Display .rar (1.2 KB)

How can I control some of the images displayed on a webpage? For example, if I want an icon to show it, use css to control it.

Css sprites Problems
First, you need to have a certain ps Foundation. You can put all kinds of small icons in one layer, and pay attention to the image spacing when placing them, think about the space left by the icon you want to display on the page in advance, and how to properly display an icon without showing the corners of other icons. It is also best to use a transparent layer, so that no matter whether the small icon is in gif, jpg, or png format, it will not affect the display effect.
Then you need to understand how to write the background image in css. Generally, the combination is used: background: color url () x value y value repeat;
Color is the color of your background image. You can leave it empty;
The url is the link address of the currently displayed icon. It must be clearly indicated whether it is an absolute path or a relative path. Otherwise, an error is reported and the image cannot be found;
The x value and Y value are the positions of the icons in the merged background image. Note: The merged background image is placed in the Fourth quadrant of the plane coordinate. The origin is the upper left corner of the merged image, and the position of the small icon is determined, then npx is written and displayed on the page through the pixel control icon. The x value is generally positive, and the y value is generally negative or 0;
There are four repeat attributes, repeat-x (horizontal tile), repeat-y (vertical tile), and no-repeat (not repeated ).
For example, if you want to display the first icon of the current merged graph on the page, you can write: background: url (image address) 0 0 no-repeat;
If you want to display the second horizontal icon: The X-axis coordinate of the second icon is 50px, the y-axis must be 0 in the horizontal direction. Format: background: url (image address) 50px 0 no-repeat;

This is basically the case. If you have any questions, ask me again.

Q: How can I display only part of the image in html + css?

There is no problem with the example you provided, that is, only part of the image is displayed as required.