linear-gradient 함수
함수 linear-gradient는 선형
그라데이션을 설정합니다. 배경 이미지를 설정하는 속성:
background,
background-image
또는 테두리 이미지를 설정하는 속성: border-image,
background-image-source에 적용됩니다.
구문
선택자 {
background: linear-gradient([각도 또는 방향], 색상1 크기1, 색상2 크기2...);
}
값
| 값 | 설명 |
|---|---|
| 방향 |
임의의 각도 단위
또는 키워드 top, left, right, bottom
혹은 이들의 조합: top left, top right 등으로 그라데이션 방향을 지정합니다.
단어 순서는 중요하지 않습니다: top left 또는 left top로 쓸 수 있으며,
차이가 없습니다. 이 매개변수는 선택 사항입니다: 지정하지 않으면 그라데이션은
위에서 아래로 진행됩니다(to top와 같습니다). 방향 앞에는 to 단어가 옵니다.
|
| 각도 | 임의의 각도 단위로 된 각도입니다. 양수 또는 음수일 수 있습니다. 매개변수는 선택 사항입니다. 동시에 각도 또는 방향 중 하나만 지정할 수 있습니다(또는 아무것도 지정하지 않을 수 있습니다). |
| 색상1 | 임의의 색상 단위로 된 그라데이션의 시작 색상입니다. |
| 색상2 | 임의의 색상 단위로 된 그라데이션의 끝 색상입니다. |
| 크기 | 임의의 크기 단위로 특정 그라데이션 색상의 범위를 지정합니다. |
예제 . 가장 간단한 경우
구문:
선택자 {
background: linear-gradient(시작 색상, 끝 색상);
}
예제를 살펴보겠습니다:
<div id="elem"></div>
#elem {
background: linear-gradient(black, red);
width: 200px;
height: 200px;
}
:
예제 . 각도 추가
구문:
선택자 {
background: linear-gradient(각도, 시작 색상, 끝 색상);
}
예제를 살펴보겠습니다:
<div id="elem"></div>
#elem {
background: linear-gradient(45deg, black, red);
width: 200px;
height: 200px;
}
:
예제 . 방향 추가
각도 대신 방향
top, left, right, bottom
또는 이들의 조합: top left, top right를 추가할 수 있습니다.
방향 앞에는 to 단어가 옵니다.
구문:
선택자 {
background: linear-gradient(방향, 시작 색상, 끝 색상);
}
예제를 살펴보겠습니다:
<div id="elem"></div>
#elem {
background: linear-gradient(to left, black, red);
width: 200px;
height: 200px;
}
:
예제 . 방향 추가
다른 방향을 지정해 보겠습니다:
<div id="elem"></div>
#elem {
background: linear-gradient(to top left, black, red);
width: 200px;
height: 200px;
}
:
예제 . 크기 추가
구문:
선택자 {
background: linear-gradient(색상1 크기1, 색상2 크기2);
}
다음 예제에서 동작은 다음과 같습니다:
순수한 빨간색은 0px부터
30px까지, 30px부터 50px까지
빨간색에서 파란색으로의 그라데이션이 되고,
50px부터 끝까지는 순수한 파란색이 됩니다:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px);
width: 200px;
height: 200px;
}
:
예제 . 2개 이상의 색상 추가
구문:
선택자 {
background: linear-gradient(색상1 크기1, 색상2 크기2, 색상3 크기3...);
}
다음 예제에서 동작은 다음과 같습니다:
순수한 빨간색은 0px부터
30px까지, 30px부터 50px까지
빨간색에서 파란색으로의 그라데이션이 되고,
50px부터 70px까지는 파란색에서
초록색으로의 그라데이션이 되며, 70px 이후는 순수한 초록색이 됩니다:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px, green 70px);
width: 200px;
height: 200px;
}
:
예제 . 급격한 전환
다음 예제에서 동작은 다음과 같습니다:
순수한 빨간색은 0px부터
30px까지, 순수한 파란색은 30px부터
60px까지, 순수한 초록색은 60px 이후입니다
(red 0px는 쓰지 않아도 됩니다):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
width: 200px;
height: 200px;
}
:
예제 . 크기는 퍼센트로도 지정할 수 있습니다
다음 예제에서 동작은 다음과 같습니다:
순수한 빨간색은 0%부터
30%까지, 순수한 파란색은 30%부터
60%까지, 순수한 초록색은 60% 이후입니다
(red 0%는 쓰지 않아도 됩니다):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
width: 200px;
height: 200px;
}
:
예제 . background-size와 결합
다음 예제에서 동작은 다음과 같습니다:
순수한 빨간색은 0px부터
30px까지, 순수한 파란색은 30px부터
60px까지, 그리고 이 모든 것이
60px 크기의 조각으로 반복됩니다(background-size:
60px; 때문입니다):
<div id="elem"></div>
#elem {
background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
background-size: 60px 60px;
width: 200px;
height: 200px;
}
:
참고 항목
-
함수
radial-gradient,
이는 방사형 그라데이션을 생성합니다 -
함수
repeating-linear-gradient,
이는 반복되는 선형 그라데이션을 생성합니다 -
함수
repeating-radial-gradient,
이는 반복되는 방사형 그라데이션을 생성합니다
