[gradient] CSS - linear-gradient() 함수 ★ - 선형 그레이디언트 배경이미지 (= 선형 그라디언트 = 선형 그래디언트 = linear-gradient함수 = 리니어그라디언트 함수)

1. linear-gradient() 예제 - 선형 그레이디언트 배경색
2. linear-gradient() 정의
3. linear-gradient() 구문
4. linear-gradient() 예제 - direction 매개변수

linear-gradient() 예제 - 선형 그레이디언트 배경이미지 

[예제1] - direction 매개변수 사용 X 경우

 

<style>

div {

  height: 200px;

  background-image: linear-gradient(red, yellow, blue);

}

</style>

<div>홈짱닷컴 Homzzang.com</div>

 

결과보기

---

[예제2] - direction 매개변수 사용 O 경우

 

body {

  background: linear-gradient(to right, green 0%, yellow 50%, red 100%); 

  background-color: yellow;

}

 

결과보기

linear-gradient() 정의

 

선형 그레이디언트 (= 서서히 한쪽에서 다른 한쪽으로 변화하는 색번짐 효과)

 

---

※ 외래어표기법 상, '그레이디언트'가 맞음. 

 

1.

background / background-image 속성에서만 사용 가능.

[주의] background-color 속성에선 사용 X (예제 보기) 

 

2.
최소 2개의 지점을 정의해야 하며, 방향도 지정 가능.

 

3.

CSS3

4.
IE10 이상 최신 주요 브라우저 지원

구 버전 브라우저 경우 접두어 필요.

https://homzzang.com/b/css-126

 

linear-gradient() 구문

 

selector {background-image: linear-gradient(direction, color-stop1, color-stop2, ...);}

 

---

[매개변수]

direction 

그레이디언트 효과와 함께 시작점과 방향 (또는 각도) 정의

 

color-stop1, color-stop2, ... 

필수. 색 변환 지점의 색깔. 최소 2개 이상 필요.

선택. 색상 값 다음에 0 ~ 100 %로 나타낸 위치 표시.

linear-gradient() 예제 - direction 매개변수

 

오른쪽 방항 

background-image: linear-gradient(to right, red , blue);

 

우하향 대각선 방향

background-image: linear-gradient(to bottom right, red , blue);

 

0도 방향
background-image: linear-gradient(0deg, red, blue);

90도 방향
background-image: linear-gradient(90deg, red, blue);

 

180도 방향

background-image: linear-gradient(180deg, red, blue);

 

-90도 방향

background-image: linear-gradient(-90deg, red, blue);

여러 색깔

background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);

투명도 적용
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

반복
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

https://homzzang.com/b/css-273