CSS Common background image positioning method

CSS background image positioning in fact, for every learning front-end students, are already very familiar with. One of the most common scenarios for overwhelming the web is to relative the parent element and then absolute the child element. This is certainly good, but one drawback is that it changes the hierarchical relationship of elements, and if used in multiple places, such cascading nesting relationships can be confusing.

First temporarily abandon that kind of plan, give everybody to share several CSS background picture localization scheme.

The whole article will follow the following ideas:

1. Non-dependent absolute positioning

2.background-position Extended Syntax

3.background-origin positioning

4.calc () positioning

1. Non-dependent absolute positioning

On the network, there is such a misunderstanding to absolute, that the use of absolute positioning absolute must set the parent element relative positioning relative. Such an understanding can not be regarded as wrong, only to say that the definition is not fully understood. This is defined in the absolute document:

Creates an absolutely positioned element that is positioned relative to the first parent element other than the static anchor. The position of the element is defined by the ' left ', ' right ', ' bottom ', ' top ' attributes.

The interpretation of this sentence should be as follows (L:left,r:right,b:bottom,t:top)

A: When Position:absolute is set for an element, if the parent element is not set position:relative, the element is positioned by LRBT based on the upper-left corner of the viewable window area, if the parent element is set position:relative , the element is positioned by LRBT based on the upper-left corner of the parent element container.

B: When generating an absolutely positioned element, regardless of whether the parent element is set position:relative, using Margin-top, Margin-left, Margin-right, Margin-bottom of which two are located in the opposite direction, The effect will be positioned according to its position as opposed to positioning relative. But the only difference between using the margin location and the relative is that the original physical space has disappeared while the absolute is out of the document stream, and the original physical space is still occupied by relative.

Therefore, you can use absolute with no dependent relative to locate the method by using margin instead of using LRBT.

The code is as follows:

Html

. Keith {
Margin:2em;
Width:5em;
Height:5em;
Background:lightgreen;
}.keith. Main {
Position:absolute;
Background:url (".. /images/my-icons/loginicon.png ") scroll no-repeat 0 0;
width:21px;
height:21px;
Margin-left:calc (5em-25px);
Margin-top:calc (5em-25px);
}

In the above code, use Margin-left, Margin-top and Position:absolute to locate the image. Calc () in CSS3 is used to calculate the value to be positioned.

The example picture is as follows:

2.background-position Extended Syntax

In the CSS3 background and border, the Background-position property has been extended to allow us to specify the offset of the background image from any angle, as long as we specify the keyword before the offset.

The code is as follows:

. keith{
Margin:2em;
Width:5em;
Height:5em;
Background:lightgreen url ('.. /images/my-icons/loginicon.png ') scroll no-repeat;
Background-position:right 5px Bottom 5px;
};

In the above code, you can use the Background-position extension syntax to locate the 5px distance from the lower-right corner.

3.background-origin positioning

Background-origin is a new attribute in CSS3 that is used to determine the reference origin of the Background-position attribute, which determines the starting point for the background image positioning. By default, the Background-position property of the background picture is always set to the background image with the upper-left corner of the element as the coordinates originally intended.

Background-origin has three attribute values Content-box, Padding-box (default), Border-box.

See how to use this property to position the background image in the lower right corner of 5px, as shown in the code below.

. Keith {
Margin:2em;
Width:5em;
Height:5em;
padding:. 5em;
Background:lightgreen URL (".. /images/my-icons/loginicon.png ") scroll no-repeat;
Background-position:right Bottom;
-moz-background-origin:content;
-o-background-origin:content-box;
-webkit-background-origin:content;
Background-origin:content-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
Box-sizing:border-box;
}

In the above code, a padding value is set for the box. Use the Box-sizing property to adjust the div in the browser box model for the IE box model, border-box means the total width =content area + padding + border. Here to the Background-origin property set Content-box, you may not understand, why not padding-box. Look at the one under Firefox.

In the picture above, the yellow area is margin, the purple area is padding, and the light blue area is content-area. If the element is set to Padding-box, then the picture is positioned in the lower right corner, with no space in the lower right corner. So this is where you use Content-box to locate. The final effect is as follows.

4.calc () positioning

If we want to use the content to open the width and height of the container, instead of fixing the height and width, we need to use the Calc attribute +background-position property in combination to position the picture. Because the height and width of the container are not known at this time, only 100% can be calculated.

This is a piece of text that is used to open the container.

. keith{
Margin:2em;
Padding:2em;
Display:inline-block;
Background:lightgreen url ('.. /images/my-icons/loginicon.png ') scroll no-repeat;
Background-position:calc (100%-5px) Calc (100%-5px);
}

The example picture is as follows:

Finish. Thank you for reading.

