Positioning of background images in CSS

1. Keywords, such as: Background-position:top right;
Advantages: Intuitive, high availability, consistent performance in each browser.
Disadvantage: Missing interval size. Three vertical (top, center, bottom) and three horizontal (left, center, right) can only be grouped for you up to 9 positions. There are no other combinations of blends. And it is difficult to use arithmetic to control the same way as the other two numerical positioning methods.

2. Pixel, for example: background-position:0px 0px;
Advantage: The concept is easy to understand, as long as you know how to measure the upper left corner of the container and the distance between the upper left corner of the picture, you can accurately infer the location of the picture display. Pixels can also be used to accurately control positioning in math.
Disadvantage: You must know the exact value.
Principle, as shown in the diagram. In fact, the upper-left corner of the picture is relative to the upper-left corner of the container.


3. Percentage, for example: background-position:80% 50%;
Advantage: Mathematics can be used to control positioning and is more flexible than pixel positioning.
Disadvantage: IE cannot handle complex percent positioning.
Principle, as shown in the diagram. Unlike pixel positioning, its percentage position refers to the location of the container and the corresponding position within the picture as shown.


Soso when making a Web page, why would you put multiple icons in a picture file?
A friend who often collects resources on the Internet may find that many websites like to put small icons in a picture file. Then in the CSS through the Background-position positioning Access icon, visit a large number of sites, especially. Why, then? Isn't it more flexible to manage separately?
That's what everybody does. Of course there are advantages, but there are also drawbacks.
Advantages:
1.1 + 1 < 2
Icons together, you can make the total size of the icon a little bit smaller. That's not the most important thing, but I can tell you that a lot of programmers are perfectionists.
2. To reduce the number of connections
A friend who has used Opera may be impressed by the progress bar that shows the download of the picture, and it will show "the total number of pictures/pictures downloaded." For each individual resource on the WEB server, it needs to be connected and fetched. So we all try to put a lot of icons on a picture, connect it all back. This may be the main purpose of a multiple-scale map.
3. Let the browser download the icon in advance
Browsers in order to display the page as soon as possible, usually only the pictures used to open the page to download to the local, and some may use, but not immediately used in the picture needs to be downloaded when the application. The most classic example may be the Navigation menu tab icon, if the normal state of the tab icon and mouse hover when the icon is placed independently, then when you move the mouse to the Tab button, the icon to start downloading, which will bring users a bad visual effect. So I think when it comes to this, it's necessary to combine multiple icons together.
Disadvantages:
1. Picture difficult to manage, difficult to locate
If you want to replace an icon, then you need to edit the entire large picture. If you want to change the size of an icon, it is likely that you need to recalculate its position, even to the point where you can add another icon.
2.2 > 1
The two-icon composite picture is definitely larger than the one with an exclusive image, that is, the time it takes to download the picture is longer than a single icon. Browser display pictures are generally downloaded after the display or download side of the display, if you have a few icons composed of a larger picture, then they can not be displayed to the user individually, will create a very bad user experience.
Application:
1. Let the icon as far as possible arrange to have the law
Regular emission of icons with easy positioning and maintenance, where the interval can be used 16, 32, 48, 96, such as standard size.
2. Put together icons with a consistent background color
If the background color is not the same, preferably divided into two or more picture placement, especially the background color similar, it is easy to confuse.
3. Put the same column icon together
This will be less to write some CSS code. Set a background, and then set the Background-position on each item.
4. Do not tie the big picture to a piece
Most users will not be patient to wait for the page, so the file is downloaded and then read, "impatient" will drive them to the point close.
Expand:
Everything is interlinked, and so is software and internet technology. If a picture is required for each connection to be made as a network resource, so does the. js file and the. css file. We should tie up the resources that might be put together. This will save you some resources, but also can satisfy your pursuit of the perfect vanity.
But avoid excessive. Not everything can be tied together, and no one will tie the detergent to the cookie. will be relevant, or particularly fragmentary put together is OK, I believe that smart you will have their own set of classification methods.