Striped background

Background: CSS linear gradient, background-size

CSS linear gradient
“`css
background: linear-gradient(red, yellow, blue);
background: linear-gradient(red 0%, yellow 50%, blue 100%);
background: linear-gradient(to right, red 0%, yellow 50%, blue 100%);
background: linear-gradient(90deg, red 0%, yellow 50%, blue 100%);
` ` `
  1. to rightRepresents the gradient offset Angle,to right(the equivalent of90deg)
  2. Red, yellow, blueIt stands for gradient, it stands for gradientRed-yellow-blue (equivalent to red 0% - yellow 50% - blue 100%). This means that the gradient is red at 0% distance, yellow at 0-50% distance, and blue at 50-100% distance.
    1. linear-gradient(90deg, red 0%, yellow 50%, blue 0) Is equivalent to

    linear-gradient(90deg, red 0%, yellow 50%, blue 50%)Because when your color code position value is set to0Is automatically adjusted tobeforeA color code position value. 3.linear-gradient(90deg, red 20%, yellow 50%, blue 100%); Representatives from the0-20%forredColor. 4.linear-gradient(90deg, red 20%, yellow 20%, blue 100%); Representatives from the20%In colorAll of a suddenThe change is yellow. (There is no gradient distance between 20% and 20%) 5.linear-gradient(90deg, red 20%, yellow 20%, yellow 50%, blue 100%); Representatives from the20% – 50%.All over the placeyellowAnd then gradually change from 50% to 100% blue

CSS linear gradient summary

  1. The two adjacent color values in line-gradient represent the gradient from color code A to color code B.
  2. The value immediately following the color represents the gradient between the two colors AB. (The difference is the length of the gradient interval. If the difference is 0, it is a mutation.)
  3. If the value after the color is 0, the value of the previous digit is automatically taken.

background-size

/* Keyword */
background-size: cover background-size: contain /* background-size: contain /* background-size: contain50%
background-size: 3em
background-size: 12pxBackground-size: auto /* Two values */ /* The first value specifies the width of the image, the second value specifies the height of the image */ background-size: auto /* Two values */ /* the first value specifies the width of the image.50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto
Copy the code
  1. coverRepresents the background image overwrites the background size, may only see a part of the enlarged background image.
  2. containRepresents the background image to load the background size, may see the background blank.
  3. Two valuesWidth, height, height can be omitted, default auto

From MDN background – size

Horizontal stripes

First let’s achieve the effect of horizontal stripes.

The level of First Try

We learned about line-gradient’s ability. We can achieve the effect of color mutation by extremely reducing the gap between the two colors. background: linear-gradient(#fb3 50%, #58a 50%);

CSS images (3rd edition) : If multiple color codes have the same position, they create an infinitesimal transition area. The transition start and end colors are the first and last specified values, respectively. In effect, the color changes suddenly, rather than a smooth gradual process.

The Second level the Try

So far it looks like we’ve achieved two huge stripes, each half the height. Next we add background-size capabilities.background-size: 100% 20px; By controlling the size of the background and setting the height to 20px, the actual size of the background, which is 50% of the height, becomes 10px high. Plus the background is repeatedly tiled by default, so you have a stripe effect.

The level of Third Try

Cross stripes of two colors are now implemented. So what if I have three colors, four colors? I think when you look at this and think about it you’ll know how to do it.

background: linear-gradient(#fb3 33%.#58a 0.#58a 66%, yellowgreen 0);
background-size: 100% 60px;
Copy the code

Horizontal stripe color can be achieved basically

The level of Forth the Try

Let’s try it again with transparency

background: linear-gradient(rgba(255.187.51.0.9) 0%.rgba(255.187.51.0.2) 33%.rgba(85.136.170.0.9) 0.rgba(85.136.170.0.2) 66%.rgba(154.205.50.0.9) 0.rgba(154.205.50.0.2) 100%);
/* background: Linear-gradient (RGBA (255, 187, 51, 0.2) 0%, Rgba (255, 187, 51, 0.9) 33%, Rgba (85, 136, 170, 0.2) 0, Rgba (85, 136, 170, 0.9) 66%, RGBA (154, 205, 50, 0.2) 0, RGBA (154, 205, 50, 0.9) 100%); * /
background-size: 100% 60px;
Copy the code


background: linear-gradient(rgba(255.187.51.0.2) 0%.rgba(255.187.51.0.9) 33%.rgba(85.136.170.0.2) 0.rgba(85.136.170.0.9) 66%.rgba(154.205.50.0.2) 0.rgba(154.205.50.0.9) 100%);
background-size: 100% 60px;
Copy the code

Add transparency with gradient to achieve some solid sag and full stripe effect.

Vertical stripes

Horizontal stripes have been implemented, but vertical stripes are not easy. We only need to make two changes to the horizontal stripe code above.

  1. Add Angle to gradient, to right or 90deg
  2. Background-size parameters swap positions.
background: linear-gradient(90deg.#fb3 33%.#58a 0.#58a 66%, yellowgreen 0);
background-size: 60px 100%;
Copy the code

The other effects are left to you to practice

Next: CSS Revealed: 5. Stripe Backgrounds (2)