CSS3 on the new background series background

1. Review the background properties that you have previously learned

1.1 Background-color
1.2 Background-image
1.3 Background-repeat
1.4 Background-position
1.5 background-attchment
1.6 Background

2. CSS3 New Background property

2.1 Background-origin
2.2 Multi-heavy backgrounds
2.3 background-size

1.1 Background Color properties: Background-color

There are 3 ways to represent colors: words, RGB notation, hexadecimal notation

1. Words: can be expressed in words, are simple colors

2. RGB notation

RGB represents the three primary colors "red" red, "green" green, "blue" blue.
Optical display, each pixel is composed of three primary colors of the luminous original, by the luminance of different colors.

Separated by commas, values of R, G, B, value range of each value 0~255, total 256 values

Green: Background-color:rgb (0,255,0);  Blue: Background-color:rgb (0,0,255); Black: (Optical display, each element does not glow, black) Background-color:rgb (0,0,0);

3.16 binary notation

All values starting with # are 16 binary.

Red: Background-color: #ff0000, 16 binary notation, also two-bit two-bit look, see R, G, B, but no comma separated. FF is 10 binary 255, 00 is 10 binary 0,00 is 10 binary 0. So it is equivalent to RGB (255,0,0);

Add:
Basic digits in decimal (total 10): 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Basic numbers in hexadecimal (total 16): 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, D, E, F

Hexadecimal, 13 What does this number mean?
Represents a 16 and a 3 of 1. That's 19. This is the concept of the right of way, the beginning of this expression how many 16, the end of the number of 1.

1.2 Background-image

Used to add a background image to a box. The background is naturally covered.

Background:url (images/1.jpg);

1.3 Background-repeat

Sets whether the background map is repeated or repeated.

Background-repeat:no-repeat; Do not repeat background-repeat:repeat-x; transverse repetition of background-repeat:repeat-y; Longitudinal repetition

1.4 Background-position

Background positioning properties

Background-position: Move the amount down to the right

Describe in words:

Describe the word: Left, center, right
Describe the words: top, center, bottom

Lower right corner: Background-position:right Bottom;

1.5 Whether the background picture scrolls (background-attchment)

Scroll: Scrolling. Default value fixed: pinned. does not scroll as the scroll bar scrolls local

1.6 Background Comprehensive and properties

The Background property, like border, is a comprehensive property:

background:red URL (1.jpg) no-repeat 100px 100px fixed; equivalent to: Background-color:red;background-image:url (1.jpg); background-repeat:no-repeat;background-position:100px 100px;background-attachment:fixed;

You can omit the part arbitrarily:

background:red;

If the box has a background image and a background color. In fact, to show the main picture, rich places, filled with color.

Background:blue URL (images/wuyifan.jpg) no-repeat 100px 100px;

2.1 Datum points for background images (Background-origin)

border-box: Ignore border, directly from the beginning of the border 0, 0 o'clock Tile padding-box: Default value, ignore padding, directly from the padding start 0, 0 o'clock Tile Content-box: Tile from the Content section, the location of the padding is set aside. So padding's going to affect it.

2.2 Multi-heavy backgrounds

css3-new Background series background. Background images are separated by commas and can be written in groups, and the first rendered image may obscure the image that is rendered later.

Background:  URL (images/1.jpg) 0 0 no-repeat,url (images/2.jpg) 121px 0 no-repeat,url (images/3.jpg) 242px 0 no-repeat ;

2.3 Controlling the size of the background image (Background-size)

Background-size: Value

Value:

* * Length value **px percent : With box width as reference Auto: True size of background picture

contain: full display (when the width or height of the image is scaled, there is a "bump" on the edge of the box, it stops changing)

cover: fully covered (the background image is scaled to the full overlay container, the background image may be out of the container)

When only one value, such as width, is stretched, the height defaults to auto, and the ratio is maintained.
When there are two values, the width and height are stretched separately to the corresponding values, which can deform.