CSS background (background) family

The background (background) is an important part of CSS and one of the basics of CSS, and now it's time to review the 3 properties and 2 new features in the 5 properties and CSS3 in Css2.

css2_ Background (background) prequelfamily members

The background (background) family consists of 5 main background attributes in Css2, namely:

BACKGROUND-COLOR Specifies the background color of the fill Background-image a reference picture as the background image background-position the location of the specified element background picture background-repeat c5/> determines whether the background map is tiled background-attachment the background is scrolled　

Want to know the details of the five members of the family, for details, hurriedly find a place to sit down, quietly listen to my blow!

background-color Background Color

The member can only fill the background with a solid color.

Value of ColorName: (1) color name: Red, green, blue, skyblue ...　　　　(2) RGB (): RGB (255,255,255), RGB (12,202,29) ...　　　　 (3) Hex color value: #000000, #ffffff, #ff6600 ...　　Special value (Default):   (4) Transparent: transparent; Transparent background

background-image Background Map

This member allows you to specify a picture as the background.

Background-image:url (ImagePath);     ImagePath refers to the picture path (relative path and absolute path)

Best Practices : Combined with (Background-color), you can guarantee that a background color can be filled in the following situations:

A> picture does not come out (may be wrong path, the picture does not exist); B> pictures were mistakenly deleted; C> pictures can't cover the whole box in the case of uneven paving;

background-repeat Background Tile

When you set a background picture, the member defaults to tiling the picture horizontally and vertically to fill the entire box.

Background-repeat:propertyvalue;   PropertyValue refers to attribute values

Value of PropertyValue: (1) Repeat: (default) tile (2) No-repaet: Uneven (3) Repeat-x: Horizontal tile (4) repeat-y:     Tile Vertically

background-position Background Positioning

This member controls the position of the background image in the box, i.e. the upper-left corner of the background image relative to the upper-left corner of the box.

Background-position:x-coordinate y-coordinate;        (Vertical coordinate of horizontal direction coordinates)

Value of the property: (1) Percent: 10% ...　　(2) pixel value: 10px ... (3) Orientation noun: horizontal: Left Right center vertical: Top Bottom Center　

The default value is three ways of expression:

Background-position:left top;　　　background-position:0px 0px; background-position:0% 0%;

Special Note:

Background positioning when using percentages, the browser sets the position of the picture as a percentage of the box size, illustrating:

background-position:40% 50%; 40% refers to: the background picture in the horizontal direction 40% position, corresponds to the box horizontal direction 40% position 50% refers: the background figure in the vertical direction 50% position, corresponds to the box vertical direction 50% position

background-attachment Background Attachment

This member determines whether the background image is fixed or scrolls along with the rest of the page.

Background-attachment:status     //Background attachment status

Status value: (1) Scroll:  scrolling (default), the background graph scrolls with the rest of the page (2) fixed: pinned, the background image does not scroll when the rest of the page scrolls (3) Inherit:  Inherit the settings of the Background-attachment property from the parent element (seldom used)

css3_ Background (background) post-biography

CSS3 not only added 3 members to the background family, but also expanded 2 important functions for the background family.

Knowledge Point Station:

CSS3 's leader is not a web, but a WHATWG organization made up of major browser vendors, which was later adopted by the Internet. Therefore, the new attributes of CSS3 are different in the writing before and after the adoption.

Before being accepted by the Internet, if the browser wants to support this property, it needs to add the browser's private prefix (the kernel used by the browser) to indicate that it is a private property of the browser, not the official property of the Web. So, in real work, you have to write this (take Background-origin for example):

-webkit-background-origin:-moz-background-origin:;-ms-background-origin:;-o-background-origin:  ; 　　　　Plus the browser private prefix notation Background-origin:; It must be brought on

(i) new members of the family

First look at the background of the new members of the family, very handsome very beautiful very mysterious:

Background-origin background Origin background-size background  size background-clip  background cut

Next, the old driver driving time, please sit and grab the handrail!!

Background-origin Background Origins

This member determines the location of the background map relative to which part of the box is usually used in conjunction with the background-position .

By default, the background map is positioned relative to the inner margin of the box (padding)! However, in CSS3, the spec background can also be positioned relative to the box's border (border) and content.

-webkit-background-origin:positionarea;     Positionarea refers to the locating area-moz-background-origin:positionarea;-ms-background-origin:positionarea;-o-background-origin : Positionarea; background-origin:positionarea;

Positionarea value: (1) Padding-box: The background image is positioned relative to the inner margin of the box (default) (2) Border-box:   The background image is positioned relative to the box's border (3) Content-box:  The background map is positioned relative to the contents of the box.

Special Note:

A> the member began to support from IE9;
B> the box model in CSS: Content + padding (inner margin) + border (border) + margin (margin);

background-size Background Size

The member determines the size of the background map, but does not change the original size of the picture itself.

-webkit-background-size:widthsize heightsize; (width dimension height size)-moz-background-size:widthsize heightsize; -ms-background-size:widthsize heightsize;-o-background-size:widthsize heightsize; background-size:widthsize Heightsize;

Value of the property:

　　(1) Default value: Auto

Background-size:auto Auto; The background map is rendered in its own size

(2) pixel value: px ...

background-size:50px 50px; The background map is rendered with the specified value

(3) Percentage: 100% ...

background-size:50% 50%; The background image is rendered as a percentage of the size of the box

(4) Cover

Background-size:cover; Zoom the background to just cover the box

(5) contain

Background-size:contain; Zoom the background map to the width or height of the box, if the full background map is guaranteed to be displayed

Best Practices:
Picture private features: As long as you set the picture width High school Any one value, the picture will be equal to the scale, this can ensure that the picture does not distort without losing true;
Therefore, usually take advantage of the image of this feature, in the case of not knowing the size of the picture, such as scale scale, background-size only to the picture width High School of any one of the settings, and the other one set to auto.

background-clip Background Cutting

This member specifies the drawing area of the background (background map or background color).

-webkit-background-clip:cliparea; Cliparea refers to the drawing area-moz-background-clip:cliparea;-ms-background-clip:cliparea;-o-background-clip:cliparea; Background-clip:cliparea;

Cliparea: (1) Border-box: The background is trimmed from the box border (default) (2) Padding-box: The background is trimmed from the inner margin of the box (3) Content-box: The background is trimmed from the contents of the box　

(ii) extended family functions

Look at all the two features that CSS3 has extended to the background family!

a> multiple background images b> background gradient

Feel tall on the look, in the end is what mysterious function, hurriedly come together analysis and analysis!

Multiple background graphs

CSS3 allows one element box to apply one or more pictures as a background, and multiple backgrounds are separated by commas "," and the pictures are displayed in the Order of writing!

Background:url (./images/01.png), url (./images/02.png), url (./images/03.png);

Special Note:

A> from IE9 support;
B> does not need to add the browser private prefix;
c> if Content-box, Padding-box and Border-box set together, you need to write Content-box in the front, Padding-box write in the second, Border-box written in the last;

Background:url (./images/01.png) Content-box, url (./images/02.png) Padding-box, url (./images/03.png) Border-box;

　　Note: Here Content-box, Padding-box and Border-box are both Background-clip attribute values and Background-origin attribute values;

Background Gradient

In CSS3, you can set a background color gradient for an element box, rather than simply setting a solid color as the background color of the box or specifying the picture as the background of the box! Remember that the background gradient here is the background color! Background color! Not a background map!!

(1) linear gradient　

Also known as a linear gradient.

Background-image:-webkit-linear-gradient (startlocal, Color1, Color2, Color3); background-image:- Moz-linear-gradient (startlocal, Color1, Color2, Color3); Background-image:-ms-linear-gradient (startlocal, Color1, 　Color2, Color3); Background-image:-o-linear-gradient (startlocal, Color1, Color2, Color3); 　　Plus the browser private prefix notation background-image:linear-gradient (startlocal, Color1, Color2, Color3); The wording

Color1 represents a color value:

(1) If you do not add a percentage or pixel value: a> color1 will be displayed at the starting position, B> Color3 will be displayed at the last position, C> Color2 will be displayed in the middle, (2) If you add a percentage or pixel value, the color will be in the box The position of the child is displayed;　

Startlocal represents the starting position, which is the desired value:

(1) Position noun:

Top: Gradient (default) from top to bottom (    equivalent to bottom) left: gradient  right-to-right (equivalent to-to-left): bottom: Gradient from bottom to top (equivalent to top) top left: The gradient starts from the top right corner

(2) degree degree:
In the background gradient, the standard of the WHATWG is different: the axis is different, the starting position differs, the direction of rotation varies. Therefore, the degree is not the same! Specific:

In the a>, 0deg is on the left side of the x-axis (horizontal direction) and rotates clockwise;
In B> WHATWG, 0deg is rotated counterclockwise under the y-axis (vertical direction);

　　　　　　

background-image:-webkit-linear-gradient (270deg, red, blue); Background-image:-moz-linear-gradient (270deg, Red , blue); Background-image:-ms-linear-gradient (270deg, red, blue); Background-image:-o-linear-gradient (270deg, Red, 　　　　blue); Background-image:linear-gradient (180deg, red, blue); / *deg = degree degrees * /

In particular, it does not support the notation of positional nouns, but supports the writing of degrees.

(2) radial gradient

Also known as the center gradient

Background-image:-webkit-radial-gradient (start_x start_y, Color1, Color2, Color3); background-image:- Moz-radial-gradient (start_x start_y, Color1, Color2, Color3); Background-image:-ms-radial-gradient (start_x Start_Y, 　Color1, Color2, Color3); Background-image:-o-radial-gradient (start_x start_y, Color1, Color2, Color3); 　　　Plus the browser private prefix notation background-image:radial-gradient (start_x start_y, Color1, Color2, Color3); The wording

Description: The value of the starting position of the radial gradient does not support the notation of degrees!

Background (background) sequelae (i) background (background) complex

In CSS, you can set all the background properties (including CSS3 new properties) in a declaration with the background composite property, instead of writing a background property individually, you can set the Background property:

is not feeling very good, but here a few pits, deserves our attention!

(1) commonly referred to as the background composite property, is for CSS2 in the 5 background attributes, does not include CSS3 in the new 3 background properties!

Background:background-image background-repeat background-position background-attachment background-color;

A> does not exist in the strict sense of the writing order (above is the old driver's writing order);
B> If a property is not written, the default value is automatically applied;

So background composite properties, why not include the 3 properties in CSS3? The reasons are:

A> CSS2 Background properties, has been supported by major browsers, there is no compatibility, do not need to write the browser private prefix! b> CSS3 New Background properties, there is a certain compatibility, and need to bring the big browser of the private prefix to be supported!

(2) Remember CSS3 to the background of the family to add a number of new background map function, the function is also to start with background!

So here's the problem!

What if we want to use the background compound attribute to abbreviate the background property of CSS2 and add multiple background graphs in an element?

A> priority to add multiple backgrounds with background composite properties;b> background properties can only be written separately, you cannot use the background composite attribute to shorthand!c> a separate write background property, it must be written behind the background compound property!

There must be another classmate to ask, why does the individual background attribute have to be written after the background compound attribute?

CSS three major features of the Cascade sex! Superseding, before the waves died on the beach!

(ii) about the Background-image attribute

This family member is very good, of course also more complex!

(1) Background composite properties that can cover multiple background graphs!

In the same element:

Causes multiple background map effects to be invalidated

Div { width:300px; height:300px; background:url (images/30/ab.png) content-box,url (images/30/xiaoming.jpg) Padding-box; background-image:url (images/30/ab.png);}

In a nested parent-child element:

a> if the child element's background map size is smaller than the size of the parent element, then the extra parts of the parent element's multiple background map effects are displayed!
b> if the child element's background map size is greater than or equal to the size of the parent element, then the parent element's multiple background map effects will be overwritten!

Div { width:300px; height:300px; background:url (images/30/ab.png) content-box,url (images/30/xiaoming.jpg) Padding-box;} Div span { Display: block; width:300px; height:300px; background-image: url (images/02.jpg);}

(2) Background gradient and background map share the Background-image Property!

A> in the same element, the two cannot coexist, who is in front, who first dies;
B> in a nested parent-child element, the style of the child element overrides only the style of the parent element;

(iii) The difference between the inserted picture and the background map

(1) Insert image placeholder; Background map does not occupy a position

(2) Insert the image of high semantics, can be indexed by the search engine, background map is low in semantics, can not be searched by the search engine

(3) Inserting the picture is not easy to locate; The background map is easy to locate because of the Background-position property

(4) The image can not be inserted into the sprite diagram, background map can be used in the sprite map

(5) Insert picture has a bug, below with a gap

(iv) Best practices

(1) in the same element, the background compound attribute is written in front, the background property that needs to be set separately is written at the back;
Reason: The Yangtze River before the wave, before the wave died on the beach

(2) Multiple background graphs are added to the same element, and other background attributes can only be written separately, not in the compound attribute shorthand;

(3) in nested parent-child elements, write property with the same name is not recommended
Reason: When the child element size is greater than or equal to the parent element size, the style of the parent element is overwritten by the quilt element;

(4) in the actual work, multi-use background map, less use of inserting pictures;

This article belongs to their own after the study of the summary of sharing, hope that your study can provide some help! If there are errors, please also look at the advice, I will be the first time to make corrections! Thank you!!

CSS background (background) family