There is no limit to learning. Don’t lose yourself in the ocean of knowledge.

Know what you want, stay focused, and stay true to your original purpose.

20 percent of the world’s population controls 80 percent of the wealth.

The next series of tutorials will get you to the point of being the 20 percent.

Review:

Key attributes -display

Key attribute -position

Key attribute -float

Key properties – Flex

Key attributes – Overflow

Key attributes – Media

Key attribute Background

CSS Background Here refers to setting the background properties of an object through background, such as setting the background styles through CSS.

background-color 

Sets the color as the object background color

background-image 

Set the image as the background image

background-repeat 

Sets the background tiling repeat direction

background-attachment 

Sets or retrieves whether the background image scrolls with the object content or is fixed.

background-position 

Sets or retrieves the background image position of an object.

Background

The values of the background style are compound attribute values, that is, the value of the background word can be linked with multiple attribute values, using a space between the values.

Background effect:

1. Set a solid color background. Background You can set the background color of the solid color of the object.

2. The setting diagram is the background. You can set the background of the object as a picture. If the background is a picture, you can repeat the image as tiled, or fix the image as the background of the object in any position.

Background analysis

A. Set the background color

B. This is the specific picture path of the background

C. Set whether the picture is tiled

No – repeat: don’t repeat

Repeat -x: horizontal (horizontal) repeat tile

Repeat -y: repeat tile in the vertical direction

If this parameter is not set, tiling is used for the full background

D. Specify the distance between left, right, up and down

Left The picture is left

Right picture is on the right

Top Picture up

Bottom The picture is down

E. The background picture is fixed, still scroll with the up and down scroll bar

Fixed Picture

Scroll Background image to scroll

Code practice

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, <meta http-equiv=" x-UA-compatible "content="ie=edge"> <title> Flex layout CSS </title> <style>. Container { background: # FFF url (https://image.baidu.com/beijing.gif) - repeat fixed 0 0} < / style > < / head > < body > < div class = "container" > background </div> </body> </html>Copy the code

Interview questions:

The CSS cannot display the background color

1. The CSS background color cannot be displayed due to floating using float

2, the height is not enough and the background cannot be displayed

3. If float is caused: There are three solutions: set clear to clear float, set CSS height, and set CSS Overflow style.

4. If the height is the cause: The solution is as follows: Set a high enough height or cancel deleting the height style.