Small CSS experience: locating background images in CSS

When CSS uses an image background, it is often used to merge multiple small images into a large image to Save loading time on the webpage. At this time, Image Positioning is required for using images and some explanations are provided on the Internet:

 

1. Keyword, for example: Background-position: Top right;

Advantages:Intuitive, high availability, consistent performance in various browsers.
Disadvantages:The interval size is missing. three vertical (top, center, bottom) and three horizontal (left, center, right) can only combine up to 9 positions for you. there are no other mixed combinations. and it is difficult to use arithmetic for control like the other two numerical locating methods.

 

 

 

2. pixels, for example, background-position: 0px 0px;

 

Advantages:The concept is easy to understand. As long as you know how to measure the distance between the upper left corner of the container and the upper left corner of the image, you can accurately predict the position of the image. pixels can also be precisely controlled by mathematics.
Disadvantages:You must know the exact value.

 

Principle. It is actually the coordinate relationship between the upper left corner of the image and the upper left corner of the container.

 

 

3. Percentage, for example, background-position: 80% 50%;

 

Advantages:You can use mathematics to control positioning, and it is more flexible than pixel positioning.
Disadvantages:IE cannot handle complicated percentage positioning. You can check this test.

 

Principle. Unlike pixel positioning, the percentage position indicates the corresponding position inside the container and image as the display position.