repeating-linear-gradient () 예제
<style>
div {
height: 200px;
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
</style>
<div>홈짱닷컴 Homzzang.com</div>
결과보기
repeating-linear-gradient () 정의
선형 그래디언트 반복.
1.
기본 사용법은 linear-gradient와 유사
https://homzzang.com/b/css-271
2.
CSS3
3.
IE10 이상 최신 주요 브라우저 지원
구 버전 브라우저 경우 접두어 필요.
https://homzzang.com/b/css-126
repeating-linear-gradient () 구문
background-image: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);
[매개변수]
angle
그레이디언트 방향 각도. (0 ~ 360 deg) ※ deg (= degree 도, 각도. 정도)
side-or-corner
그레이디언트 선의 시작점 위치. (두 개의 키워드로 구성)
첫 번째 키워드: 가로축 (left 또는 right)
두 번째 키워드: 세로축 (top 또는 bottom)
순서는 관련이 없으며 각 키워드는 선택 사항임.
(예)
to left top (왼쪽 상단쪽으로)
to right (오른쪽으로)
0.25turn
color-stop1, color-stop2, ...
필수. 색 변환 지점의 색깔. 최소 2개 이상 필요.
선택. 색상 값 다음에 0 ~ 100 %로 나타낸 위치 표시.
repeating-linear-gradient () 예제
기본 예제
background-image: repeating-linear-gradient(#e66465, #e66465 20px, #9198e5 20px, #9198e5 25px);
angle (기울기) 예제
background-image: repeating-linear-gradient(45deg, red, blue 7%, green 10%);
background-image: repeating-linear-gradient(90deg, red, blue 7%, green 10%);
side-or-corner 예제
background-image: repeating-linear-gradient(to left top, blue, red 20px);
background-image: repeating-linear-gradient(to right, red 0%, green 10%, red 20%);
함수 2개 이상 사용
background-image: repeating-linear-gradient(transparent, #4d9f0c 40px), repeating-linear-gradient(0.25turn, transparent, #3f87a6 20px);
더 자세한 건 아래 좌표 참고
https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient
