Article Directory
CSS can be added by adding background elements or background images
1 Set the background image
The background-image property allows you to specify an image to display in the background (only CSS3 can have multiple backgrounds) and can be used in conjunction with background-color. If the picture is not repeated, the areas that cannot be covered by the picture will be filled with the background color. If there is a background image tile, it will cover the background color.
1.1 Background tiling
repeat : The background image is tiled vertically and horizontally (default)
no-repeat : the background image is not tiled
repeat-x : The background image is tiled horizontally
repeat-y : The background image is tiled vertically
no-repeat
repeat-x: tile on the x axis
repeat-y: tile on the y axis
1.2 background position (position)
Set or retrieve the background image position of the object. The background-image attribute must be specified first. The default value is: (0% 0%).
If only one value is specified, that value will be used for the abscissa. The ordinate will default to 50%. The second value will be used for the ordinate.
100px describes the coordinates on the x axis, 200px describes the coordinates on the y axis
1.3 Background transparency (CSS3)
CSS3 supports translucent background writing syntax format is:
background: rgba(0,0,0,0.3);
The last parameter is the alpha transparency range of 0~1
Note: Translucent background means that the background of the box is semi-transparent, and the content inside the box is not affected.
Set the background color to black
Set the transparency, the last 0.7 represents transparency
1.4 Background zoom (CSS3)
Set the size of the background image through background-size, just like we set the size of img, it is very widely used for screen adaptation in mobile web development.
The parameter settings are as follows:
a) You can set the length unit (px) or percentage (when setting the percentage, refer to the width and height of the box)
b) When set to cover, the zoom ratio will be automatically adjusted to ensure that the picture always fills the background area, and if there is an overflow part, it will be hidden. We usually use the most cover
c) Set to contain will automatically adjust the zoom ratio to ensure that the picture is always displayed in the background area completely.
1. 
Set the length to control the size of the picture
2. Make the picture adaptive to the screen by setting the cover, and the overflow part will be hidden . (recommend)
3. Set to contain will automatically adjust the zoom ratio to ensure that the picture is always displayed in the background area completely .
1.5 Multiple backgrounds (CSS3)
You can set multiple backgrounds separated by commas, which can be used for adaptive layout is to separate them with commas.
- One element can set multiple background images.
- Use commas to separate each group of attributes.
- If there is an intersection between the set multiple background images (that is, there is an overlap relationship), the previous background image will be overlaid on the back background image.
- In order to avoid the background color covering the image, the background color is usually defined on the last group.
