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 함수,
원형 그라데이션을 생성합니다.