Функција repeating-linear-gradient

Функција repeating-linear-gradient задаје понављајући линеарни градијент. То значи да ми задајемо одређени узорак градијента, на пример, од 0px до 10px - градијент од црвене до плаве и овај градијент ће се понављати на целом блоку: од 0px до 10px, од 10px до 20px, од 20px до 30px и тако даље.

Ова функција се примењује на својства која задају слику позадине: background, background-image или слику границе: border-image, background-image-source.

Синтакса

селектор {
	background: repeating-linear-gradient([правац], боја1 величина1, боја2 величина2...);
}

Вредности

Вредност	Опис
правац	Задаје одређени правац градијента у било којој јединици за углове или кључним речима `top`, `left`, `right`, `bottom` или њиховом комбинацијом. Ред речи није битан. Параметар није обавезан: ако се не напише, градијент ће ићи одозго надоле. Испред правца ставља се реч `to`.
угао	Угао у било којој јединици за углове. Може бити позитиван или негативан. Параметар није обавезан. Истовремено може бити задат или угао, или правац (или ништа од тога).
боја1	Почетна боја градијента у било којој јединици за боју.
боја2	Завршна боја градијента у било којој јединици за боју.
величина	Задаје протезање одређене боје градијента у било којој јединици за величину.

Пример . Најједноставнија варијанта

Градијент ће изгледати овако: од 0px до 20px чиста црвена боја, од 20px до 40px - градијент од црвене до плаве. И тако ће се понављати одозго надоле (на то је и понављајући градијент):

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(red 20px, blue 40px);
	width: 400px;
	height: 200px;
}

Пример . Оштре боје

Градијент ће изгледати овако: од 0px до 20px чиста црвена боја, од 20px до 40px - чиста плава (штица је у томе што друга боја почиње тамо где се завршава прва). И тако ће се понављати одозго надоле:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(red 0px, red 20px, blue 20px, blue 40px);
	width: 400px;
	height: 200px;
}

Пример . Променимо правац

Сада ће правац градијента бити с десна на лево:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(to left, red 0px, red 20px, blue 20px, blue 40px);
	width: 400px;
	height: 200px;
}

Пример . Правац у степенима

Као правац задаћемо угао у степенима:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(45deg, red 0px, red 2px, white 2px, white 10px);
	width: 400px;
	height: 200px;
}

Пример . Негативна вредност

Направимо правац негативном вредношћу:

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(-45deg, red 0px, red 2px, white 2px, white 10px);
	width: 400px;
	height: 200px;
}

Погледајте такође

функцију repeating-radial-gradient,
која креира понављајући радијални градијент
функцију linear-gradient,
која креира линеарни градијент
функцију radial-gradient,
која креира радијални градијент