CSS Stripe background

First introduce the two knowledge points used in the article

Background-size Property

Grammar

Length| percentage|cover|contain;

Length

Sets the height and width of the background image. The first value sets the width, and the second value sets the height. If you set only one value, the second value is set to "Auto".

Percentage

Sets the width and height of the background image as a percentage of the parent element. The first value sets the width, and the second value sets the height. If you set only one value, the second value is set to "Auto".

Cover

Expand the background image to be large enough to allow the background image to completely cover the background area. Some parts of the background image may not appear in the background positioning area.

Contain

Extend the image image to the maximum size so that its width and height are fully adapted to the content area.

CSS linear gradient linear-gradient (to <side-or-corner>) | | <angle>,<color-stop>,<color-stop>)

<side-or-corner> = [left | right] | | [Top | bottom]

Specifies the direction (or angle) of the gradient with an angle value.

<color-stop> = <color> [<length> | <percentage>]

Background:linear-gradient (to top,red, blue);

Let's Change the code:

Background:linear-gradient (to top,red 50%, Blue 50%);
background-:

Into:

Rewrite again:

Background:linear-gradient (to top,red 50%, Blue 50%);             background-size:100% 30px;

Horizontal stripes appear

A horizontal stripe effect is formed by coincident the percentage behind the color, where the color label is located.

It is also possible to write more than two colors:

Background:linear-gradient (to top,red 33.3%, blue 0%,blue 66.7%,pink 0);            background-size:100% 90px;

Vertical stripes

Originally the same horizontal stripe, just change the background-size and linear=gradient gradient direction

Background:linear-gradient (to right,red 33.3%, blue 0%,blue 66.7%,pink 0); background-size:90px 100%;

Difficulty: diagonal Stripes

CSS Stripe background