CSS3 Background temperature

1. Five basic properties of the background
Background-color (background color)
Background-image (background image)
Background-repeat (background image display mode)
Background-attachment (whether the background image is fixed or scrolled)
Background-position (background image position)
Integrated use of:background:[<background-color>][<background-image>][<background-repeat>][< Background-attachment>][<background-position>]

2.background-color Property
Syntax: background-color:transparent | | <color>
Transparent: Transparent Color
Color: colour name, RGB color, HLS value, hexadecimal value, Rgba color, Hsla value

3.background-image Property
Syntax: Background-image:none | | <url>
None is the default value, no meaning
URL: Image address, can be a relative address, or it can be an absolute address

4.background-repeat Property
Syntax: background-repeat:repeat | | Repeat-x | | repeat-y | | No-repeat
Repeat: Background picture is tiled along the x-axis and y-axis
Repeat-x: Background image tiles along the x-axis
Repeat-y: Background picture is tiled along the y-axis
No-repeat: Background picture does not do any tiling

5.background-attachment Property
Syntax: Background-attachment:scroll | | Fixed
Scroll: Background picture scrolls with the rest of the page
Fixed: The background image does not move
Note: When the value is fixed, it is used on the HTML or body tag and cannot be fixed on other labels.

6.background-position Property
Syntax: Background-position:[percentage] | | [Length] | | [Left | center | right] | | [Top | center | bottom]
Role: Used to set the position of the background picture
Default value: (0,0) | | (0%, 0%) | | (left top), the value can be a specific percentage or numeric setting (can be a negative value), or you can use the keyword left, center, top, right, top, bottom mate settings, and attribute positioning methods:

New properties in 7.CSS3
Background-origin: Specifies the starting point for drawing a background picture
Background-clip: Specifies the display range of the background picture
Background-size: Specify the size of the background picture
Background-break: Specifies how the background picture of an inline element is cycled when it is tiled

8.CSS3 Background origin attribute: Background-origin
Function: Used to change the reference origin of the Background-position property, the default starting point is the top left corner.
Old syntax format: background-origin:padding | | Border | | Content
New syntax format: Background-origin:padding-box | | Border-box | | Content-box
Note: ie9+, firefox4+, chrome4+, safari3+, and opera10.5+ all support the new syntax format
has three attribute values: Padding-box, Border-box, Content-box
Padding-box (padding): Default value, determines background-position start position displays background picture starting from the outer edge of padding (the inner edge of the border)
Border-box (Border): Determines background-position start position to display background picture starting from the outer edge of border
Content-box (content): Determines the background-position start position from the outside edge of the content (the inner edge of the padding) to display the background picture
Note: IE8 the default values for the following version Background-origin border, the background-position of the background picture is the background picture from the border
Browser compatibility:

9.CSS3 Background Crop properties: Background-clip, the new second property that defines the clipping area of the background image. Similar to the Background-origin property, the accepted values are:
Padding-box (the background extends to the outer edge of the padding, but does not extend beyond the bounds of the border)
Border-box (background picture under the border, this is also the default value of Background-clip)
Content-box (the background is only drawn in the content area and does not exceed the range of padding and borders)
Syntax: Background-clip:border-box | | Padding-box | | Content-box
Border-box: The default value, the element background image is cropped outward from the border area of the element, that is, the background picture outside the element's border is clipped out
Padding-box: The element background image is cropped outward from the padding area, that is, the background image outside the element padding area will be clipped out
Content-box: The element background image is cropped from the content area, which is the background image outside the element's content area will be cropped off
Note: An element background in HTML is usually composed of the contents of the element (content), internal filler (padding), Border (border), and external filler (margin) four parts.

10. Browser compatibility

For Background-clip and Background-origin, I now understand the usefulness of the fact that they are seldom used in practice, perhaps with their own continued depth can have a very good experience, the main sentiment is sometimes, We can not too much to identify which attributes of the scope of use, the different range of ideas, can only gradually to understand

11.CSS3 Background Dimension Properties

With the dimension attribute, you can specify the size of the background picture, you can control how the background picture is scaled in two directions horizontally and vertically, and control how the picture stretches over the background area, or even the background image. Background image can be adapted to the size of the element box, to achieve the size of the module to fully adapt to the background picture, to avoid the different size of the block and need to design different background images, in the actual work, the background image can reach any size

Syntax: Background-size:auto | | <length> | | <perentage> | | Cover | | Contain
Auto: Defaults to keep the original size of the background picture
<length>: Takes a specific integer value (px value), which changes the size of the background image
<percentage>: The value is hundred points, can be 0% ~ 100%. At this point, the size of the background image is also changed, but the value is calculated relative to the width of the element, not based on the width of the background image.
Cover: Enlarge the background image to fit the entire container. But this method can cause the background image to be distorted
Contain: Maintains the aspect ratio of the background image, scaling the background image to a width or height that fits the area of the defined background container

When the value is <length> and <percentage>, you can take two values, the first one is the width, the second is the height; When you take a value, the second value is set to auto, so that the height of the background image scales proportionally

Cover PK contain:

The first one is cover, the second is contain, the result: Cover embodies is to meet the container, that is, cover the main container, contain reflects the picture is the main picture-based

Browser compatibility:

12. Inline element background image tiling Cycle Mode Background-break Property
Used to define the looping mode of the inline element background image when tiled, with three property values: Bounding-box, Each-box, continuous, respectively, representing three tile loops. Unfortunately this property is compatible with Firefox only, and is written as "-moz-background-inline-policy"
Bounding-box: Background image is tiled across inline elements
Each-box: Background image is tiled in rows
Continuous: The background image of the next line continues to tile from the image on the previous line
The compatibility of this property is outrageous, it is best to try it yourself, there is no absolute support and no support for compatibility, more often the use of their own test

13.CSS3 Multi-background properties
The ability to use composite background images on a single container requires multiple containers for CSS3 to reach multiple backgrounds;
With CSS3 's multi-background attribute, only one container is required, and all background images that need to be used are listed in the CSS's Background-image or background properties, separated by commas. Each of these images has properties in background, such as the ability to position, set duplicates, change the size of the background image, and other features that can be individually controlled.
Syntax and Parameters: background-(position| | repeat| | clip| | origin| | Attachment) attribute, the adjacent background must be separated by commas
Specific syntax: Background:[background-image] | [Background-position] [/bckground-size] | [Background-repeat] | [Background-attachment] | [Background-clip] | [Background-origin], *
The above abbreviations can also be disassembled into the following form:
BACKGROUND-IMAGE:URL1, Url2, Url3, Url4,..., urln;
Background-repeat:repeat1,repeat2,..., Repeatn;
Background-position:position1,position2,..., Positionn;
Background-size:size1,size2,... Sizen;
Background-attachment:attachment1,attachment2,..., Attachmentn;
BACKGROUND-CLIP:CLIP1,CLIP2,..., CLIPN;
Background-origin:origin1,origin2,..., Originn;
Background-color:color;
Note: In addition to Background-color (only one setting, setting multiple will be a fatal syntax error), other properties can set multiple property values, provided that the element has multiple background images, and that multiple attribute values must be separated by commas
In a multi-background image, the first declared background image will be at the top, and the last specified background image will be placed at the bottom.
In CSS2 multiple backgrounds, the first one is to use multiple containers, the second is to merge multiple images onto a single image
Multi-background picture compatibility:

CSS3 background attributes do not need to be prefixed, but when you use Background-size\background-clip\background-origin, you still need to add a browser prefix

CSS3 Background temperature