Функция 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 функциясы,
ол радиалды градиентті жасайды