Chapter 4 CSS border and background [bottom]-original of water

Chapter 4 CSS border and background [bottom]-original learning points of water:

1. Set the background

Lecturer: Li Yanhui

This chapter mainly discusses CSS borders and backgrounds in HTML5, and adds richer appearances to elements through border and background style settings.

1. Set the background

The size of the box model can be visible in two ways, one is the previous border, and the other is the background. The CSS background settings are as follows:

Attribute	Description	CSS version
Background-color	Background Color	1
Background-image	Background Image	1/3
Background-repeat	Style of the background image	1/3
Background-size	Size of the background image	3
Background-position	Location of the background image	1
Background-attachment	Scroll of background image	1/3
Background-clip	Crop background images	3
Background-origin	Starting Point of the background image	3
Background	Abbreviations of background images	1

1. background-color

Value	Description	CSS version
Color	Set the background color to the specified color.	1
Transparent	Set the background color to transparent	1

p {    background-color: silver;}

Description: sets the background color of an element. The property value is the color value.

p b {    background-color: transparent;}

Explanation: The default value is transparent, indicating transparency. This way

Internal elements will inherit

. Generally, this attribute is used very frequently because the default value is used when the color does not need to be changed, and the color value is used when the color needs to be changed.

body {    background-color: silver;}

Explanation: InYou can set the background color of the entire page under the element.

2. background-image

Value	Description	CSS version
None	Cancel background image settings	1
Url	Set the background image through URL	1

body {    background-image: url(loading.gif);}

Explanation: the url contains the path of the image. It sets the entire page to take the image as the background. If the image is not covered enough, copy the extension.

p {    background-image: none;}

Explanation: if multiple p sets the background in batches, and one of them does not need a background, you can set the none value to cancel the background separately.

In CSS3, gradient methods such as linear and radioactive are also set for the background image. However, due to support issues, such as IE9 is not yet supported. We will introduce these new features to an independent course.

3. background-repeat

Value	Description	CSS version
Repeat-x	Horizontal tiled Image	1
Repeat-y	Vertically tiled Image	1
Repeat	Tiled images in both the horizontal and vertical directions	1
No-repeat	Disable tiled Images	1

body {    background-image: url(loading.gif);    background-repeat: no-repeat;}

Explanation: Only one background image is displayed, not tiled. CSS3 also provides two values, which are ignored here due to poor support.

4. background-position

Value	Description	CSS version
Top	Position the background image to the top of the element	1
Left	Position the background image to the left of the element.	1
Right	Position the background image to the right of the element.	1
Bottom	Locate the background image to the bottom of the element	1
Center	Locate the background image to the middle of the element.	1
Length Value	Use the length value to offset the image position	1
Percentage	Offset the image position by percentage	1

body {    background-image: url(loading.gif);    background-repeat: no-repeat;    background-position: top;}

Description: place the background image on the top of the page. If you want to place the background image on the top left, the value is top left.

body {    background-image: url(loading.gif);    background-repeat: no-repeat;    background-position: 20px 20px;}

Explanation: The length value or percentage is used. The first value indicates the left and the second value indicates the top.

5. background-size

Value	Description	CSS version
Auto	Default value. The image is displayed in this size.	3
Cover	Proportional scaling of the image to make the image cover at least the container, but may exceed the container	3
Contain	Scale the image proportionally so that the image width and height are larger than those in the container horizontally or vertically.	3

Length Value	CSS length values, such as px and em	3
Percentage	For example: 100%	3

body {    background-image: url(loading.gif);    background-size: cover;}

Explanation: the use of cover is equivalent to 100%, and a large image is paved in full screen mode. This value is very practical. In the process of proportional enlargement and downgrading, the background may be exceeded. Of course, this is harmless.

p {    background-image: url(loading.gif);    background-size: contain;}

Explanation: Use contain to display the entire image in the element as much as possible.

body {    background-image: url(loading.gif);    background-size: 240px 240px;}

Explanation: Length Value usage, indicating length and height respectively.

6. background-attachment

Value	Description	CSS version
Scroll	Default value. The background is fixed on the element and does not scroll along with the content.	1
Fixed	The background is fixed in the window, and the background does not move when the content is rolled	1

body {    background-image: url(loading.gif);    background-attachment: fixed;}

Explanation: The fixed attribute will produce a watermark effect on the background. Drag the scroll bar and the background will not move.

7. background-origin

Value	Description	CSS version
Border-box	Draw a background inside the element box	3
Padding-box	Draw background inside the inner margin box	3
Content-box	Draw a background inside the content box	3

p {    width: 400px;    height: 300px;    border: 10px dashed red;    padding: 50px;    background-image: url(img.png);    background-repeat: no-repeat;    background-origin: content-box;}

Explanation: Set the start position of the background.

8. background-clip

Value	Description	CSS version
Border-box	Crop the background inside the element box	3
Padding-box	Crop the background inside the inner margin box	3
Content-box	Crop the background inside the content blacklist	3

p {    width: 400px;    height: 300px;    border: 10px dashed red;    padding: 50px;    background-image: url(img.png);    background-repeat: no-repeat;    background-origin: border-box;    background-clip: padding-box;}

Explanation: crop the background inside the inner margin box.

9. background

p {    width: 400px;    height: 300px;    border: 10px dashed red;    padding: 50px;    background: silver url(img.png) no-repeat scroll left top/100% border-box content-box;}

Explanation: The complete abbreviated order is as follows:

[Background-color]
[Background-image]
[Background-repeat]
[Background-attachment]
[Background-position]/[background-size]
[Background-origin]
[Background-clip]