css style pictures, gradients, and related knowledge summary

1, background-position: (picture positioning)

##Three ways to write:

1): According to the % ratio, the upper left corner is the smallest (0%, 0%), the lower right corner is the largest (100%, %100);

2): (x, y) the upper left corner is the smallest (0, 0), the right corner is the smallest The largest lower corner (max, max);
3) top, center, left, right, bottom;

2, background-clip:

1, including the value of that part: border; padding; content;

3, background-origin:

1, from That part of the value starts: border; padding; con tent;

Four, whether the background image is fixed or scrolls with the rest of the page.

1, scroll: scrolls with the rest of the page

2, fixed: fixed at a certain position in the window.

Five, gradient:

1, linear gradient: linear-gradient:

1) If it is an angle: angle, transition color ;
2) If it is top. . . , add to before the direction, and transition color after;
2, radial gradient: radial-gradient:
1) The default is the center point gradient;
2) [size at left top]: where size is the gradient radius.

3, Repeating gradient:

1) Repeating linear gradient: repeating-linear-gradient: The format is the same as linear gradient.

2) Repeat the radial gradient: reoeating-radial-gradient: The format is the same as the radial gradient.

The above css style pictures, gradients, and related knowledge (must read) are all the content shared by the editor. I hope it can give you a reference, and I also hope that everyone will support the PHP Chinese website.

For more css style pictures, gradients, related knowledge summary and related articles, please pay attention to the PHP Chinese website!