Recently I looked up information in the nuggets (touch fish), found a divine text, instant split, what ？？？？background-imageYou can play with flowers!True, the flower.In the originalTo see how the god of CSS background image play out. As a result, I also have a lot of fantastic ideas to try, and even want to directly in the background of a qingming River pictureCough, can you pull a qingming Festival riverside picture to leave a suspense, let’s explore the following background picture is exactly which sacred:

What isbackground-image ?

  • You: Teacher! I know that. It’s just givinghtmlDoes the element set the background image?
  • Teacher: Can you give me an example?
  • You: background-image: url(‘ beauty.jpg ‘)
  • Teacher: Anything else?
  • You: No ~

I believe that many friends usually use only this kind of usage. Background-image can be used in n other ways:

  • linear-gradient()
  • radial-gradient()
  • repeating-linear-gradient()
  • repeating-radial-gradient()
  • conic-gradient()

Let’s start with the first one: linear gradients

Linear gradientlinear-gradient()

Background-image: linear-gradient(direction, color1 stop1, color2 stop2…)

Parameter Description:

  • direction(Optional) :
    • Keywords (8 types, 8 directions)
      • to bottomTop to bottom (default)
      • to topFrom the bottom up
      • to rightFrom left to right
      • to leftFrom right to left
      • to right bottomFrom top left to bottom right (here the keywords in no particular order, can also be writtento bottom right, the same as below)
      • to left bottomFrom top right to bottom left
      • to right topFrom bottom left to top right
      • to left topFrom bottom right to top left
    • Numerical (Angle) Arbitrary Angle
      • xdeg X ∈ (- up, + up)
      • 0degThe equivalent ofto top
      • 90degThe equivalent ofto right
      • 180degThe equivalent ofto bottom
      • 270degThe equivalent ofto left
  • color1Color 1 (required)
    • Red, blue...
    • # 123456, # abcdef...
    • RGB (0, 1, 2), RGBA (9, 8, 7,.6)...
    • Other valid color values
  • stop1Color 1 where to stop (optional)
    • Only percentages are supported (value size does not have to be from small to large!!)
  • color2Color 2 (required) ditto
  • stop2Where does color 2 stop (optional) ditto
  • .At least 2 colors

Let’s start with the simplest example (two monochromatic gradients) :

div {
    width: 300px;
    height: 200px;
    background-image: linear-gradient(red, yellow);
}
Copy the code

We notice that the first parameter direction is not written here, but it defaults to top down, i.e., to bottom. We try to change its fill direction to right, which looks like this:

background-image: linear-gradient(to right, red, yellow);
Copy the code

We would like to know if the filling direction can be arbitrary, and the answer is yes. We try to make the filling direction oblique 60 degrees upwards, and add a few colors to make the effect more obvious:

background-image: linear-gradient(30deg, red, orange, yellow, green, cyan, blue, purple);
Copy the code

When defining direction by Angle, note that the starting point is clockwise from the positive y axis, so the above code says 30deg, which is not quite what we expected. Here’s a diagram to help you understand:

We see the gradient up here where each color is evenly distributed in the background, and we’re like, can I just arbitrarily set the color ratio? of course!!! First effect:

background-image: linear-gradient(red 10%, green 20%, purple 50%);
Copy the code

We have added a percentage of stops to each color, meaning that the current gradient ends here and the next gradient begins here. Start filling with red and stop filling with red at 10% (we can see that the top 10% of the figure is solid red for this reason); Then the gradient begins with red and ends with green, ending at 20% (the red life cycle is over); The gradient that starts with green and ends with purple ends at 50% (the green life cycle is over), the next 50% starts with purple and ends with the current color without setting the end position, so the next 50% is all purple… .

Based on this understanding, we draw a 1:2:3:4 gradient without a solid color block:

background-image: linear-gradient( red, black 10%, yellow 30%, white 60%, purple);
Copy the code

Finally draw a sunrise over the sea:

div {
    width: 300px;
    height: 200px;
    background-image: linear-gradient(180deg, red 20%, orange, yellow 50%, green, cyan, blue 40%, purple);
}
Copy the code

Emmmmm ~ how is the sun drawn?? Let’s break it down next time

The end! Then take ~