CSS's four layout levels and HTML tags ' ecosystem ' (ii)------background layer

The background layer, as the name implies, is the background of an element, and the background is implemented using the background in CSS properties . The Background property is an abbreviated property that expands to include many branch properties:

Background-color: Background color, use this property to add a background color to an element, and the value of adding a background color can be roughly divided into 4 types.

background-color:red; Background-color: #ff0000; Background-color:rgb (255,0,0); Background-color:rgba (255,0,0, 1); /* The above four representations are all red backgrounds, the last of which can be set to transparency */

Background-image: Background image, use this property can add one or more background picture for an element, here can see the picture, we can understand is a painted background color, it is tightly attached to the surface of the element, inseparable, and only on the element surface can see this picture, If the picture is large and the element is small, the picture may not be full.

An example of how to insert a background picture is as follows:

Background-image:url (.. /images/1.jpg);

background-repeat: Background repetition, when inserting a background image, if it is a small picture, large elements, then the picture will be infinitely tiled until the entire surface of the element is covered. This property is used if we want only a complete picture to appear on the element surface and do not want to tile. examples are as follows:

/* do not repeat */ background-repeat:repeat-x;    /* repeat only on the x-axis */ background-repeat:repeat-y;    /* repeat only on the y-axis */

background-position: Background position, when using no-repeat value, limit the background map can only insert one sheet, the picture will appear in the upper left corner of the element surface, however, in many cases, we do not want the picture to appear in the upper left corner, then, We can use this property to change the position of the background image, it can have a lot of values, percentages, pixels, words and so on. examples are as follows:

background-position:50% 50%;background-position:20px 200px; Background-position:center Center;

Background-attachment, this property, I only say one value, is fixed. When a background image sets this property and the value is fixed, then the picture is no longer moved as the element moves, it becomes a background image embedded in the page, and adding the background setting this element of the property becomes a "window" existence, only through this " window to see the background image on the page, and in other cases, the background map is not visible.

Background-size, a property that sets the size of a background image, is one of the new properties in CSS3, and its value can be pixels, percentages,cover,contain, and so on. examples are as follows:

 background-size:200px 200px;  /*   the size of the background picture is 200*200 size  */ background-size:50% 50%;  /*   the size of the background picture is One-fourth size of the container  */ background-size:cover;  /*   The smaller of the background image width is full of elements, and the larger ones are scaled  */ background-size:contain;  /*   The larger of the background image width is full of elements, and the smaller ones are scaled  */ 

Background-clip, the value can be border-box,padding-box,Content-box, which is the display of the background picture in which chunk and within the chunk.

Background-origin, the value can be border-box,padding-box,Content-box, the property is the background picture if in the upper-left corner, then its origin will start from which block.

These properties are the background layer layout commonly used in some of the properties, want to understand the CSS properties, just look at the material is not much use, more or need to summarize after their own to practice, verify whether the correct, in the validation of the knowledge learned, is the most solid.

CSS's four layout levels and HTML tags ' ecosystem ' (ii)------background layer