Go Html&css--background:url () No-repeat 0-64px; Positioning method of background image in CSS

http://blog.csdn.net/oscar92420aaa/article/details/51304067

The positioning of the background image in CSS has been bothering me for a long time. Today I finally understand, must write down.

In CSS, there are 3 ways to locate a background image:

1) Keywords: background-position:top left;

2) pixels: background-position:0px 0px;

3) Percentage: background-position:0% 0%;

The above three sentences, the picture is positioned in the upper left corner of the background, the effect is the same on the surface, in fact, the third positioning mechanism is completely different from the first two.

The first two positions are the origin of the upper left corner of the background picture, placed in the specified position. Take a look at this picture below, the specified location is "20px 10px" and "60px 50px", are the original point of the picture in that position, the figure is represented by X.

But the third position, which is the percentage positioning, is not. Its placement rule is that the point of the picture itself (x%,y%) coincides with that point in the background area (x%,y%). For example, if the drop position is "20% 10%", the actual result can be seen in the position of "20% 10%" in the image itself.

Here's an interesting example.

The background image is a stack of four squares with 100px side lengths:

How can I get it across:

The answer is to set up four div areas first in the Web page:

<div class= "Box1" >
</div>

<div class= "Box2" ">
</div>

<div class= "Box3" >
</div>

<div class= "Box4" >
</div>

Then, write CSS like this:

. Box1,. Box2,. Box3,. box4 {
Float:left;
width:100px;
height:100px;
position:relative;
Background: #F3F2E2 URL (1234.png) no-repeat;
}

. box1 {
background-position:0% 0%;
}

. box2 {
background-position:0% 33.33333%;
}

. box3 {
background-position:0% 66.66666%;
}

. box4 {
background-position:0% 100%;
}

Click here to see the final effect. You can see the settings for the second and third squares, not the "0% 25%" and "0% 75%" that are generally imagined.

But honestly, this example is easier with pixel setting. The main advantage of using the percent setting is that when the page is scaled, the background image will be scaled together, depending on the second article in "Extended reading" below.

(EXT) html&css--background:url () No-repeat 0-64px; Background image positioning method in CSS