CSS 4 Background ①

Background-color Setting the background color

<color>

Background-color: #ff0000;      　　　　　　 Background-color:rgb (255,0,0);   Background-color:rgba (255,0,0,0.5) background-color:transparent; Default

　　　　　　　　

Background-image setting a background image

<bg-image > [, <bg-image >] * Background picture is can have multiple

<bg-iimage > = < image > | None set picture or don't set picture

There are several ways to set up your pictures:

URL url ("http://163.com/images/x.png") url ("/images/x.png") url (".. /images/x.png ") url ('.. /images/x.png ') URL (.. /images/x.png)

Background-image:url (red.png); Background-image:url (red.png);           　　URL (blue.png); Background-image:url (red.png); URL (blue.png);

Background-color:green; The picture is always in the top color at the bottom

　　　　　　　　　　　　　　　　　　　　　　　　　　

The picture is tiled, and the solution is behind it.

You can even add three or four first-written images that will be written on the next level.

We can design background colors as well as background images and background images can be more than one

　　

Now let's talk about the tiling problem, what do we want to do with his x-axis tiling or uneven paving?

Background-repeat

<repeat-style > [, <repeat-style >] * This is also a number of multiple here actually corresponds to the previous multiple pictures

<repeat-style> = Repeat-x | repeat-y |

[Repeat | space | round | no-repeat] {A}

These values can occur with one or two

Repeat-x: Tile only along the x-axis

Repeat-y: Tile only along the y-axis

Repeat: Tile space along x, y: Tile the picture first, then tiling the space in the middle of each picture will leave some gaps to be divided, the gap is based on: make

The entire tile, just appear to be able to tolerate not to say the picture is truncated (combined)

Round: The picture is tiled, tiled, and the image is scaled

No-repeat: Uneven shop, pictures only appear once you

　

Example

　Background-image:url (red.png); -------------Background-repeat:repeat-x; ---------background-repeat:repeat-y;-----------Background-repeat:space; ----------Background-repeat:round

　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　　X-Axis Y-axis background-image:url (red.png), url (blue.png);

Background-repeat:no-repeat; -------------background-repeat:no-repeat Repeat,---------------background-repeat:no-repeat repeat. Repeat-x;

　　　　　　　　　　　　　　　　　　

Sometimes we find that when we scroll the content, the background does not scroll with the content scrolling, and many times our needs are rolling along

Background-attachment

<attachment > [, < attachment>] * This is also can write multiple also with the picture one by one corresponding

<attachment> = Scrooll | Fixed | Local scroll Default value

Background-image:url (red.png);

Background-attachment:scroll; background-attachment:local;

Content dynamic background fixed content background moving together

　　　　　　　　

How does a picture change its position?

Background-position

<position> [, <position >] *

The first paragraph tells us that we can write a keyword or a specific word.

The third paragraph of the second paragraph tells us that we can write two values. The first one is the value of the x-axis. The second is the y-axis value.

　　　　

When we use percentages, we should note that the percentages here refer to the position of the percentage of the picture and the position of the percentage of the entire container.

　　

Generally, we're not going to cut out a separate picture, all we can do.

---------------

CSS 4 Background ①