• Q&A
  • 회원가입
  • 로그인

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

linear-gradient() 예제

 

<style>

div {

  height: 200px;

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

}

</style>

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

 

결과보기

 

body {

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

  background-color: yellow;

}

 

결과보기

 

 

linear-gradient() 정의

 

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

 


 

1.

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

 

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

 

3.

CSS3

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

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

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

 

 

 

linear-gradient() 구문

 

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

 


 

[매개변수]

direction 

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

 

color-stop1, color-stop2, ... 

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

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


 

 

linear-gradient() 예제

 

오른쪽 방항 

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

 


오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012