css style pictures, gradients, and related knowledge summary

高洛峰
Release: 2017-03-07 14:22:25
Original
1283 people have browsed it

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!