How to position all the icons in CSS on a single Graph

In order to make the website rich and expressive, you need to apply a large number of images/icons. How to deal with these images, so that they do not affect the speed of loading, parsing, and so on, is not a small problem. If your website is beautifully decorated with various icon patterns, but you need to wait for a long time to load them, I believe many users will not be able to wait. Try to make the image smaller, which may be the solution that most people choose. However, the loading of 100 1 kb images is different from that of a kb image. This involves the simultaneous connections and network quality of the website server. However, loading an image is much easier than loading multiple images.

The most important thing is the image that involves user actions. For example, if you move the mouse up/down, the image is switched because it is triggered by an action, therefore, it will not be loaded before the action is triggered, but it will take some time to download it from the server when necessary. If the picture is large, the network quality is not good at this time, the page is blank. However, if you place all the images you need on one image, these problems will not occur. This image has been downloaded from the server during webpage loading, so it will not be lost or not loaded.

For laruence, this may have become a kind of consciousness. They both consciously and subconsciously do this. But for beginners and people who are new to the web page, it may remain at the stage of processing the image separately when the image is used. I am also a newbie. I used to switch an image in the top-right corner of a website by using two different images. The results often fail to be loaded when the network speed is poor. So today, I processed it and integrated it into an image. I am too lazy. When I add some content to my website later, I am too lazy to move my previous things. So the icons added in some areas later are all added with a small one, it is not integrated with the previous one. However, there are some sizes that are slightly larger, so they won't work. As I have done today, there is always a delay. Now I will take it as an example to illustrate the benefits of Image Positioning and integration in CSS.

In order to make a certain place expressive, such as menus and navigation, different style performances such as moving the mouse up and down are often used. The simplest thing is switching the image. For example, for two images, one is used when the mouse is not pointed, and the other is used when the mouse is moved up. To seamlessly load the second image, you need to put the two images together. For example, the figure in the upper-right corner of the site is gray at first, and the color changes when you move the mouse up. This image is used:

 

CSS definition:

. Ltlogo A {Background: URL ("img/ltlogo.gif") No-repeat left 15px ;}
. Ltlogo A: hover {Background: URL ("img/ltlogo.gif") No-repeat left bottom ;}

By the way, it is necessary to take a look at the processing of images on the webpage. In Seo, we recommend that images not be directly written into the webpage as much as possible. To use an image, the traditional method is to . Because image search engines cannot be indexed, CSS is recommended. What should we do? For example:

For example, to put a x 50 image on a page, the traditional approach is

With CSS, you can write <span id = "IMG"> </span> to the page. CSS writes the following:
# IMG {display: block; width: 50px; Height: 200px; Background: URL (source image );}

Why use display: block ;? Display: block, which forcibly converts an element in the row into a block-level element. The function here is to grade the whole block of the entire area with a width of 200 and a height of 50.

Back to the body, I am here to mount this image with CSS. In the above CSS, I only wrote important parts, and the rest are omitted. The bold part "Left 15px" is used to locate the image. In comparison, this is easier for only two images. Left is the horizontal load from the leftmost side. 15px is for my own website. Because the height of the entire layer of the image is relatively large, you need to lean down the image. You can understand that the height of the entire image is increased by 15px.

The second "Left Bottom" is the image needed when the mouse moves up. I placed the second image at the bottom, so I used bottom to position it in the vertical direction.

The above is my own example. We will discuss how to locate a large number of images on the same image and how to process icons on the same image more easily. Of course, I am a beginner. I am not familiar with the terms and terminology I use. I am still looking forward to your advice when I say something wrong. Create a web page

 

This article from the csdn blog, reproduced please indicate the source: http://blog.csdn.net/dengxingbo/archive/2010/03/15/5381647.aspx