Summary of common methods of using CSS to locate background images

Preface

One of the most common scenarios on 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. This article first temporarily abandon that kind of plan, give everybody to share several CSS background image localization scheme.

1. No dependent absolute positioning

On the network, there is a misconception that the use of absolute positioning absolute must set the parent element relative to the relative absolute. 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:

generates 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.

This sentence should be interpreted as follows (L:left,r:right,b:bottom,t:top)

A: After setting Position:absolute 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, and if the parent element is set position:relative, the element is positioned by LRBT based on the upper-left corner of the parent element's container.

B: When generating an absolutely positioned element, regardless of whether the parent element is set position:relative, use Margin-top, Margin-left, Margin-right, Margin-bottom the two non-opposite directions, the effect will be the same as relative positioning relative, according to their position to locate. 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:

<p class= "Keith" >        <p class= "main" ></p><p>        </p>    </p>

. Keith {  margin:2em;  width:5em;  height:5em;  Background:lightgreen;} </p><p>.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:

<p class= "Keith" ></p>

. 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.

<p class= "Keith" ></p>

. 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 box model for p in the browser to 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.

<p class= "Keith" >        This is a piece of text that is used to open the container. </p>

. 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);} </p><p>

The example picture is as follows: