CSS style picture, gradient, related knowledge summary

One, background-position: (Image positioning)

Three ways to do it:

1): by% ratio, the upper left corner of the smallest (0%,0%), the lower right corner of the largest (100%,%100);
2): (x, y) upper left corner min (0,0), lower right corner max (Max,max);
3) Top,center,left,right,bottom;

Two, Background-clip:

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

Three, Background-origin:

1, starting from that part value: Border;padding;con tent;

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

1,scroll: Scrolling along with the rest of the page
2,fixed: Fixed to a location in the window.

Five, gradient:

1, linear gradient: linear-gradient:
1) If it is angle: angle, transition color;
2) If it is top ... , the direction before adding to, after the transition color;
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, repeat the gradient:

1) Repeating linear gradient: repeating-linear-gradient: The format is the same as a linear gradient.
2) Repeat the gradient: reoeating-radial-gradient: The format is the same as the gradient.

Above this CSS style picture, gradient, related small knowledge (must SEE) is small part to share to everybody's all content, hoped can give everybody a reference, also hoped that everybody supports topic.alibabacloud.com.