Home > Web Front-end > HTML Tutorial > CSS controls the display of part of the image_html/css_WEB-ITnose

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

WBOY
Release: 2016-06-24 11:56:18
Original
1130 people have browsed it

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)
  • source:php.cn
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template