The CSS background

• With CSS background properties, you can add background styles to page elements
• Background properties can set the background color, background image, background tile, background image position, background image fixation, etc

The background color

The background-color attribute defines the background color of an element.

background-color: color value;Copy the code

In general, the default element background color is transparent.

background-color: transparent;
Copy the code

The background image

The background-image attribute describes the background image of an element. In practical development, it is often used for logo or some decorative small images or oversized background images. The advantage is that it is very easy to control the position. (Sprites are also an application scenario.)

background-image:none|url(url)
Copy the code

• None: No background (default)
• Url: Specifies the background image using an absolute or relative address

Background tile

If you want to tile the background image on an HTML page, you can use the background-repeat attribute.

background-repeat:repeat | no-repeat | repeat-x | repeat-y
Copy the code

Parameter values:

• Repeat: Background image is tiled vertically and horizontally (default)
• No-repeat: Background image is not tiled
• Repeat -x: The background image is tiled horizontally
• Repeat – Y: Background image is tiled vertically

Background image location

Use the background-position property to change the position of an image in the background.

background-position: x, y;Copy the code

Parameters mean x and y coordinates. You can use azimuth nouns or exact units

1. Parameters are location nouns

• If both values are azimuth nouns, the order of the two values is irrelevant. For example, left top and top left are the same
• If only one azimuth noun is specified and the other value is omitted, the second is centered by default

/* Remember not to add commas, but Spaces */
background-position: bottom right; 
background-position: bottom; 
background-position: right; 
Copy the code

2. Parameters are exact units

• If the parameter values are exact coordinates, the first must be the x coordinate and the second must be the y coordinate
• If only one value is specified, that value must be the x coordinate, and the other is vertically centered by default

3. Parameters are mixed units

• If the two values specified are a mixture of exact units and azimuth nouns, the first value is the x coordinate and the second value is the y coordinate

Background image fixation (background attachment)

The background-attachment property sets whether the background image is fixed or scrolls along the rest of the page. Background-attachment can make the effect of parallax scrolling later.

background-attachment : scroll | fixed

Background composition

To simplify the code for background properties, we can combine these properties into the same property, background. Thus saving code. When using shorthand attributes, there is no specific writing order. The general convention is as follows:

backgroundBackground color Background image Address Background Tiled Background image Scroll background image position BACKGROUND image: transparenturl(image/22055209897910.jpg) no-repeat fixed center 100px;
Copy the code

Background color translucency

CSS3 gives us the translucent effect of the background color

div {
        width: 100px;
        height: 100px;
        background: rgba(0.0.0.0.2);
}
Copy the code

• The last parameter is alpha transparency, which ranges from 0 to 1
• We like to omit the 0 of 0.3 and write background: rgba(0,0,0,.2);
• Note: background translucency refers to the box background translucency, the contents of the box is not affected
• CSS3 new properties, is only supported by IE9+ version browsers
• But now in real development, we don’t care too much about compatibility writing, we can use it safely