» » repeating-linear-gradient - Повтор линейного радиента
38 0  

repeating-linear-gradient - Повтор линейного радиента

CSS-функция repeating-linear-Gradient () создает изображение, состоящее из повторяющихся линейных градиентов. Он похож на linear-Gradient и принимает те же аргументы, но он повторяет остановки цвета бесконечно во всех направлениях, чтобы покрыть весь контейнер.

Длина повторяющегося градиента - это расстояние между первым и последним цветовым ограничителем. Если первый цвет не имеет длины цветовой остановки, длина цветовой остановки по умолчанию равна 0. При каждом повторении позиции цветовых остановок сдвигаются кратно длине основного линейного градиента. Таким образом, положение каждой конечной цветовой остановки совпадает с начальной цветовой остановкой; если значения цвета отличаются, это приведет к резкому визуальному переходу.


bully Для градиента можно использовать полупрозрачные цвета и накладывать его на обычную картинку.


Синтаксис написания аналогичен linear-gradient - смотреть

Три распостраненых способа использования линейного градиента:

Вариант 1:

background: repeating-linear-gradient(#e66465, #e66465 20px, #9198e5 20px, #9198e5 25px);
 


Вариант 2:

background: repeating-linear-gradient(45deg, #3f87a6, #ebf8e1 15%, #f69d3c 20%);
 


Вариант 3:

background: repeating-linear-gradient(transparent, #4d9f0c 40px),
            repeating-linear-gradient(0.25turn, transparent, #3f87a6 20px);
 

===

Читать о повторе градиента - repeating-linear-gradient

Примеры линейных градиентов как фона - смотреть
Онлайн генератор градиента - http://www.colorzilla.com/gradient-editor/

 
 Chrome  Edge  Firefox  Internet  Opera  Safari
26 Yes 16 10 12.1 6.1
 
 Android  Chrome  Edge  Firefox  Opera  Safari  Samsung
Yes Yes Yes 16 Yes Yes Yes

Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2019