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

sahypalaý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):

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

#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:

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

#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:

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

#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:

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

#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ň:

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

#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ň

repeating-radial-gradient funksiýasy,
gaýtalanýan radial gradient döredýär
linear-gradient funksiýasy,
çyzyksy gradient döredýär
radial-gradient funksiýasy,
radial gradient döredýär