⌘K

repeating-linear-gradient funksiýasy

repeating-linear-gradient funksiýasy gaýtalanýan çyzyksy gradient kesgitleýär. Bu şu manyny berýär: biz gradientiň kesgitli bir nusgasyny kesgitleýäris, meselem, 0px-dan 10px-a çenli - gyzyl reňkten gök reňke gradient we bu gradient bütin blokda gaýtalanar: 0px-dan 10px-a, 10px-dan 20px-a, 20px-dan 30px-a we şuňuň ýaly.

Bu funksiýa fon suratyny kesgitleýän aýratynlyklara degişlidir: background, background-image ýa-da çäginiň suratyna: border-image, background-image-source.

Sintaksis

csssahypalaýjy {
  background: repeating-linear-gradient([ugur], reňk1 ölçeg1, reňk2 ölçeg2...);
}

Görnüşleri

Görnüş Düşündiriş
ugur Käbir burç ölçeg birliklerinde ýa-da açary sözler bilen top, left, right, bottom gradientiň ugruny kesgitleýär. Sözleriň tertibi ähmiýetsiz. Görnüş hökmany däl: eger ýazylmasa, gradient ýokardan aşaga tarap gider. Ugurundan öň to sözi goýulýar.
burç Käbir burç ölçeg birliklerinde burç. Positive ýa-da negative bolup biler. Görnüş hökmany däl. Bir wagtyň özünde burç ýa-da ugur kesgitlenip biliner (ýa-da hiç zat hem däl).
reňk1 Gradientiň başlangyç reňgi, käbir reňk ölçeg birliklerinde.
reňk2 Gradientiň gutaryş reňgi, käbir reňk ölçeg birliklerinde.
ölçeg Gradientiň käbir reňkiniň uzynlygyny käbir ölçeg birliklerinde kesgitleýär.

Mysal . Iň ýönekeý görnüşi

Gradient şuňa meňzer: 0px-dan 20px-a çenli arassa gyzyl reňk, 20px-dan 40px-a çenli - gyzyl reňkten göke gradient. We şuňa meňzeş ýokardan aşaga gaýtalanar (şonuň üçin ol gaýtalanýan gradient): 

html<div id="elem"></div>
css#elem {
  background: repeating-linear-gradient(red 20px, blue 40px);
  width: 400px;
  height: 200px;
}

Результат:

Mysal . Anyk reňkler

Gradient şuňa meňzer: 0px-dan 20px-a çenli arassa gyzyl reňk, 20px-dan 40px-a çenli - arassa gök reňk (mysalyň aýratynlygy şonda, ikinji reňk birinji reňk gutaran ýerde başlaýar). We şuňa meňzeş ýokardan aşaga gaýtalanar: 

html<div id="elem"></div>
css#elem {
  background: repeating-linear-gradient(red 0px, red 20px, blue 20px, blue 40px);
  width: 400px;
  height: 200px;
}

Результат:

Mysal . Ugryny çalyşdyryň

Häzir gradientiň ugry sagdan çepe tarap bolar: 

html<div id="elem"></div>
css#elem {
  background: repeating-linear-gradient(to left, red 0px, red 20px, blue 20px, blue 40px);
  width: 400px;
  height: 200px;
}

Результат:

Mysal . Graduslarda ugur

Ugur hökmünde graduslarda burç kesgitleýäris: 

html<div id="elem"></div>
css#elem {
  background: repeating-linear-gradient(45deg, red 0px, red 2px, white 2px, white 10px);
  width: 400px;
  height: 200px;
}

Результат:

Mysal . Negative baha

Ugryny negative baha edeliň: 

html<div id="elem"></div>
css#elem {
  background: repeating-linear-gradient(-45deg, red 0px, red 2px, white 2px, white 10px);
  width: 400px;
  height: 200px;
}

Результат:

Şeýle hem göz aňyň

Backradial-gradient funksiýasyNextRepeating-radial-gradient funksiýasy