Div + CSS background (CSS Sprites)

Source: Internet
Author: User

I used to see many large websites. The background images of the entire website are the same image. I downloaded the background images and saw many small icons on the images.

CSS Sprites, which is very popular in foreign countries, is also used by many websites in China.

This time, when I wrote CSS + Div, I also wrote the whole site. Although the whole site is slow, it really saves a lot of resources for the website.

Generally, website images are separated, and each image call occupies an IIS link. However, when all images are placed on one graph, all images are one image, you only need to call an image once to provide images for the entire web page. This occupies only one IIS link.

During the production process, all the images are implemented using the background. For example, if a small icon is used, the <B class = "exp"> </B> is used to display the image, set the exp style to a background, and the background is an image.

For example:

. Exp

{

Background-image: url(bg.gif);/* background image */

Background-repeat: No-Repeat;/* Not tiled */

Background-position:-300px-50px;/* sets the position of the background image in the entire graph, and adds a negative number to the front */

Width = 25px;/* width */

Height = 25px;/* height */

}

When setting the background, you can specify the position of the background on the image, and then control the width and height. In this way, an icon is displayed, display All the interface images of the website in this way. Each graph is a small part of the big picture.

The position of each small icon in the big image can be viewed by line in PS.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.