Reprint of CSS Background-position

It's an interesting topic.

In fact, I'm not exactly how do you go to apply or play a property, a value. I can be sure that these things have a lot of playability.

What I'm going to talk about today background-position should have been a colorful game for everyone. In particular CSS Sprites , the popularity of these years, background-position is basically one of the most applied attributes.

Re-pick the old fun

We know that background-position it is used to specify the offset value of the background image, allowing a graph to unfold from a specific position. The CSS Sprites expectation of merging HTTP requests is achieved by stitching multiple small graphs into a larger image and then using background-position them to specify the areas that need to be displayed.

An application that is simple enough

In order to review background-position the application, I will then use one of the simplest examples, here is a 300*100px picture of 2 vertically stitched as a background image, such as 图0 :

Figure 0: A simple text picture

I now need to 图0 show the different sections in 2 side-by Div:

Html:

1 2	<class="Part1" ><!--display Figure 0 top half--</div> <class="Part2" ><!--display Figure 0 lower half---</div>

So I wrote a simple CSS, as follows:

Css:

1 2 3 4 5 6 7 8 9 10 11

Div{ Width 300px; height: 100px; background: Gray url (.. /test.png) No-repeat; .part1 { background-position: 0 0; .part2 { background-position: 0-< Span class= "number" >100px; } /span>

Obviously I can get the expected results such as 图1 :

Figure 1: A simple CSS sprites application

This is the most typical CSS Sprites usage scenario. Of course, you can view this example Demo1 in the simplest background-position application online.

Default value

Since background-position the default value is 0% 0% , then the above CSS code can actually be optimized to:

1 2 3

{ Background-position:0-100px; }

Because .part1 the specified value is the same as the 0 0 default value, it can be omitted. You'll find that knowing more about a property can help you write concise code.

Percentage

I'm not sure if you've used background-position a percentage, and that's right when people don't know much about it.

Try to use percentages to achieve the last example

I'm sure there are children's shoes that will write:

1 2 3 4

{ /* background-position:0 -100px; */ Background-position:0-50%; }

According to the general thinking, the above two lines of code should be equivalent, right? At the beginning, we said the height of the background map 图0 is 200px , so it -50% 's just -100px .

Don't worry, we'll use the actual example to verify the result and see Demo2 the percentage value of the test background-position.

Figure 2: Reference dimension Verification

The result is a bit sad, which is a bit out of our imagination, why?

Trace

We all know a percentage value, which is bound to require a reference dimension. For example, suppose I define the width of an element 50% , then the specific width of the element is: 包含块宽度 * 50% .

So, if you need to use a percentage as a background-position value, you have to be clear about what its reference size is.

w3cThis is how background-position the ratio of scores is described:

Original: Refer to size of background positioning area minus size of background image.

Translation: Reduce the size of the background picture by referring to the size of the specified background area

What does that mean? The vernacular says: background-position The percent value refers to the area that sets the background minus the size of the background map.

Start again

According to this idea, we will:

1 2 3

{ Background-position:0-50%; }

The conversion will get:

1 2 3

{ Background-position:50px; }

The conversion process is: (Sets the area height of the background-the height of the background graph) *-50%, i.e.: (100-200) * -50% = 50px

This explains Demo2 why you get 图2 the effect. But this is obviously not what we want, and the effect we expect is 图1 .

According to the above formula, we can reverse the expected effect percent value is how much:

1

-+/(100%

So if you want to use percentages, then the definition should look like this:

1 2 3

{ Background-position:100%; }

Results such as the Demo3 correct use of background-position percent

This will finally get the results we expect, see图3

Figure 3: Correct expected effect of percentages

Knowing the percentage of this feature will help us greatly simplify certain definitions, such as my handling of yo-score in Yo, very ingenious, interested children's shoes can be researched on their own, here is not detailed.

Additionally: It is important to note that the percentage value is affected background-size because background-size the background image can be changed in size.

Multi-value

In CSS3 , the background-position properties are extended to allow 3 to 4 parameters that specify the starting direction and location of the background graph.

Original: If three or four values is given, then each <percentage> or <length> represents a offset and must be PREC eded by a keyword, which specifies from which edge the offset is given.

Translation: If you specify three or four values, you must have a keyword before each <percentage> or <length> to specify the offset for that direction.

When you specify 3 to 4 parameters, you do not accept center the keyword as an offset as a boundary, only these 4 keywords can be used top, right, bottom, left .

The meaning of multiple values

Previously, we used background-position only to let the background map top, right, bottom, left, center start from these 5 boundaries, but could not specify an offset of any one boundary.

For example: I want a background map to be shifted from the lower-right corner20px

You will find it hard to do this without a multi-value extension, unless you can be sure that the container's width is always explicitly defined, and even so, its flexibility is worthless.

Multi-valued applications

This can be very easy if you take advantage of the multivalued feature, and we still use it 图0 as a background map to do a demo.

1 2 3 4 5 6

{ Width:400px; Height:400px; Background:url (... /test.png) No-repeat; Background-position: Right -20px; }

This will finally get the results we expect, see图4

Figure 4: Background Graph multi-value application

The effect can see the Demo4 background-position boundary offset. In fact, with multiple values, we can make the background map offset in any direction, and you might find that it can even make your structure easier to write and shallow to nest.

Reprint of CSS Background-position