목차
linear-gradient() 예제 - 선형 그레이디언트 배경색
linear-gradient() 정의
linear-gradient() 구문
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
주소 복사
랜덤 이동