Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to use CSS Sprites". In daily operation, I believe many people have doubts about how to use CSS Sprites. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to use CSS Sprites". Next, please follow the editor to study!

Why use Sprites (sprite diagram)?

A web page usually contains multiple images. These include icons, buttons, logos, related pictures and other graphics. When the image is loaded on the page, the browser issues a HTTP request to the server. Loading each image separately requires multiple calls to the HTTP server, which can result in slower download times and high bandwidth usage.

CSSSprites combines multiple images into a single image called a spirit table or collage. Instead of downloading multiple files, the user downloads a single file and displays the necessary images (or sprite images) by offsetting the file.

This can reduce the call to the server, reduce the number of downloads required to render the web page, save bandwidth and shorten the download time of the user, and reduce network congestion.

How to use CSSSprites (sprite diagram)?

Because CSSSprites is a combination of multiple images into a single image, in the spirit table, multiple images will be placed in a grid pattern, showing a mesh distribution.

When a specific image (sprite map) is needed, the elf table is generally referenced through the CSSbackground-images attribute, the desired sprite image is obtained by offsetting it through the CSSbackground-position attribute, and then the size of the sprite image is defined in pixels.

An example of using Sprites (sprite diagram)

Sprite chart:

Code example:

Html Code:

Firefox

Chrome

Explorer

Opera

Safari

Css Code:

Ul.menu {

List-style-type:none

Width:400px

}

Ul.menuli {

Padding:20px5px

Font-size:16px

Float:left

Font-family: "TrebuchetMS", Arial,sans-serif

}

Ul.menulia {

Height:50px

Line-height:50px

Display:inline-block

Padding-left:60px;/*Tosifttextoffthebackground-image*/

Color:#3E789F

Background:url (Sprites.png) no-repeat;/*Asalllinksharethesamebackground-image*/

}

Ul.menuli.firefoxa {

Background-position:00

}

Ul.menuli.chromea {

Background-position:0-100px

}

Ul.menuli.iea {

Background-position:0-200px

}

Ul.menuli.safaria {

Background-position:0-300px

}

Ul.menuli.operaa {

Background-position:0-400px

}

Ul.menuli.firefoxa:hover {

Background-position:0-50px

}

Ul.menuli.chromea:hover {

Background-position:0-150px

}

Ul.menuli.iea:hover {

Background-position:0-250px

}

Ul.menuli.safaria:hover {

Background-position:0-350px

}

Ul.menuli.operaa:hover {

Background-position:0-450px

}

At this point, the study on "how to use CSS Sprites" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.