repeating-linear-gradient()
Оновлено: 16.01.2023
repeating-linear-gradient()
Створює нескінченно повторюваний лінійний градієнт, утворюючи тим самим фоновий візерунок. За своєю дією схожа на функцію linear-gradient() і має ті самі параметри. При цьому кольори послідовно змінюють один одного, після останнього кольору в списку кольорів градієнта відразу ж іде перший.
Синтаксис
background-image: repeating-linear-gradient([<кут> | to <позиція> ,] <колір> [, <колір>]*);
Значення
| <кут> | Задає кут нахилу градієнтної лінії, який показує напрямок градієнта. Спочатку пишеться позитивне або від'ємне значення кута, потім до нього разом додається deg.Нулю градусів (або 360º) відповідає градієнт від низу до верху, далі відлік ведеться за годинниковою стрілкою. |
| <колір> | Являє собою значення кольору (див. колір), за яким іде необов'язкова позиція кольору відносно осі градієнта, її задають у відсотках від 0% до 100% або в будь-яких інших придатних для CSS одиницях. |
| <позиція> | Для запису позиції спочатку пишеться to, а потім додаються ключові слова top, bottom і left, right, а також їхні поєднання. Порядок слів не важливий, можна написати to left top або to top left. У табл. 1 наведено різні позиції і тип одержуваного градієнта для кольорів #000 і #fff, по іншому від чорного до білого. |
Приклад
Примітка
Chrome до версії 26, Safari до версії 6.1 і Android до версії 4.4 підтримують -webkit-repeating-linear-gradient().Opera до версії 12.10 підтримує -o-repeating-linear-gradient().
Firefox до версії 16 підтримує -moz-repeating-linear-gradient().
Усі властивості з префіксами не використовують ключове слово to під час задавання напрямку градієнта.