Web front End--a summary of background-related knowledge points

I. Background (BACKGROUND)

It is a single attribute

But it derives a lot of composite properties

Background-color background Color

Background-image background image

Background-repeat whether the background picture is duplicated

Background-position Background Image location

Background-attachment whether the background picture is scrolling

1. Background color

Content can put the container wide open background will not occupy the content of the wide and high background color will be covered entire container transparent background transparent (default)

2. Background image

Background-image URL (image address)

3. Tile background

Background-repeat: Whether the background map is tiled

No-repeat Uneven Shop

Repeat-x Horizontal Tiling

Repeat-y Tile Vertically

Repeat all tiles (default value)

4. Position of background image

Background-positon:x y

The distance from the upper-left corner of the container that represents the background image

X

Negative value the distance from the left side of the container to the left.

Y

The distance from the top edge of the container

The distance from the top of the container toward the top

Pass keyword

X

Left side center picture on container x axis right picture in container

Y

Top center picture in the center of the container y-axis bottom picture at the bottom of the container

Attention:

If only one value is passed, the other value defaults to center

If none of the defaults to the upper-left corner

5, background-attachment background picture whether scroll

Scroll scrolling with scroll bar (default) fixed does not follow scroll bar scrolling

6, background compound style:

　　

Web front End--a summary of background-related knowledge points