English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
CSS 선형-gradient() 함수는 선형 그레이더드를 나타내는 이미지를 생성합니다. 결과는 <gradient> 타입의 CSS 객체로, <image>의 특수 형태입니다.
다음 예제에서는 머리부터 꼬리까지 빨간색에서 시작하여 노란색으로 변하고, 다시 파란색으로 변하는 선형 그레이더드를 보여줍니다:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>기본 강의(oldtoolbag.com)</title>
<style>
#grad1 {
height: 200px;
background-image: linear-gradient(red, yellow, blue);
}
</style>
</head>
<body>
<h3>선형 빛그림자 - 헤더부터 바닥까지</h3>
<p>빨간색에서 시작하여 노란색으로 변하고, 다시 파란색으로 변하는 머리부터 꼬리까지의 선형 그레이더드：</p>
<div id="grad1></div>
<p><strong>주의：</strong> Internet Explorer 9 및 이전 버전의 IE 브라우저는 그레이더드를 지원하지 않습니다.</p>
</body>
</html>테스트를 보세요 ‹/›linear-gradient() 함수는 선형 그레이더드 "이미지"를 생성합니다.
선형 그레이더드를 생성하려면, 시작점과 방향(각도로 지정)의 그레이더드 효과를 설정해야 합니다. 또한 종료색을 정의해야 합니다. 종료색은 Gecko가 부드럽게 전환하려는 색상이며, 두 가지 이상의 색상을 지정해야 하며, 더 복잡한 그레이더드 효과를 생성하기 위해 더 많은 색상을 지정할 수 있습니다.
지원 버전: CSS3
표에서의 숫자는 이 함수를 지원하는 첫 번째 브라우저 버전 번호를 나타냅니다.
"webkit" 또는 "moz" 또는 "o"로 지정된 숫자는 이 함수를 지원하는 첫 번째 버전 번호 프리픽스입니다.
| 함수 | |||||
|---|---|---|---|---|---|
| linear-gradient() | 26.0 10.0 -webkit- | 10.0 | 16.0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.1 -o- |
background-image: linear-gradient(direction, color-stop1, color-stop2, ...)
| 값 | 설명 |
|---|---|
| direction | 각도 값으로 선형의 방향(또는 각도)을 지정합니다. |
| color-stop1, color-stop2,... | 선형의 시작색과 끝색을 지정하는 데 사용됩니다. |
다음 예제에서는 왼쪽에서 시작하는 선형 그레이더드를 보여줍니다. 시작색은 빨간색으로, 노란색으로 변합니다:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>기본 강의(oldtoolbag.com)</title>
<style>
#grad1 {
height: 200px;
background-color: red; /* 선형 그레이더드가 지원되지 않을 때 표시됩니다 */
background-image: linear-gradient(to right, red , yellow);
}
</style>
</head>
<body>
<h3>선형 빛그림자 - 왼쪽에서 오른쪽으로</h3>
<p>왼쪽에서 시작하는 선형 그레이더드. 시작색은 빨간색으로, 점점 노란색으로 변합니다：</p>
<div id="grad1></div>
<p><strong>주의：</strong> Internet Explorer 8 빛그림자를 지원하지 않는 이전 버전.</p>
</body>
</html>테스트를 보세요 ‹/›다음 예제에서는 왼쪽 상단에서 오른쪽 하단으로 이동하는 선형 그레이더드를 보여줍니다:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>기본 강의(oldtoolbag.com)</title>
<style>
#grad1 {
height: 200px;
background-color: red; /* 선형 그레이더드가 지원되지 않을 때 표시됩니다 */
background-image: linear-gradient(to bottom right, red , yellow);
}
</style>
</head>
<body>
<h3>선형 빛그림자 - 각도</h3>
<p>왼쪽 상단에서 시작하여(오른쪽 하단으로 이동하는) 선형 그레이더드. 시작색은 빨간색으로, 점점 노란색으로 변합니다：</p>
<div id="grad1></div>
<p><strong>주의：</strong> Internet Explorer 8 빛그림자를 지원하지 않는 이전 버전.</p>
</body>
</html>테스트를 보세요 ‹/›다음 예제에서는 선형 그레이더드가 일정한 각도를 지정하는 것을 보여줍니다:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>기본 강의(oldtoolbag.com)</title>
<style>
#grad1 {
height: 100px;
background-color: red; /* 브라우저가 지원하지 않을 때 표시 */
background-image: linear-gradient(0deg, red, yellow);
}
#grad2 {
height: 100px;
background-color: red; /* 브라우저가 지원하지 않을 때 표시 */
background-image: linear-gradient(90deg, red, yellow);
}
#grad3 {
height: 100px;
background-color: red; /* 브라우저가 지원하지 않을 때 표시 */
background-image: linear-gradient(180deg, red, yellow);
}
#grad4 {
height: 100px;
background-color: red; /* 브라우저가 지원하지 않을 때 표시 */
background-image: linear-gradient(-90deg, red, yellow);
}
</style>
</head>
<body>
<h3>선형 빛그림자 - 다른 각도를 사용하여/h3>
<div id="grad1" style="text-align:center;">0deg</div><br>
<div id="grad2" style="text-align:center;">90deg</div><br>
<div id="grad3" style="text-align:center;">180deg</div><br>
<div id="grad4" style="text-align:center;">-90deg</div>
<p><strong>주의：</strong> Internet Explorer 9 빛그림자를 지원하지 않는 이전 버전.</p>
</body>
</html>테스트를 보세요 ‹/›다음 예제는 여러 종료 색을 보여줍니다:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>기본 강의(oldtoolbag.com)</title>
<style>
#grad1 {
height: 55px;
background-color: red; /* 브라우저가 지원하지 않을 때 표시 */
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* 표준 문법（마지막에 반드시 배치해야 합니다） */
}
</style>
</head>
<body>
<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">
빛그림자 배경
</div>
<p><strong>주의：</strong> Internet Explorer 8 빛그림자를 지원하지 않는 이전 버전.</p>
</body>
</html>테스트를 보세요 ‹/›다음 예제는 불투명도를 사용합니다:
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>기본 강의(oldtoolbag.com)</title>
<style>
#grad1 {
height: 200px;
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
</style>
</head>
<body>
<h3>선형 빛그림자 - 불투명도</h3>
<p>불투명도를 추가하기 위해, 우리는 rgba() 함수를 사용하여 색 점을 정의합니다. rgba() 함수의 마지막 매개변수는 0에서 1 값, 그것은 색의 불투명도를 정의합니다: 0은 완전 투명을 의미합니다,1 불투명도를 나타내는 것.</p>
<div id="grad1></div>
<p><strong>주의：</strong> Internet Explorer 8 빛그림자를 지원하지 않는 이전 버전.</p>
</body>
</html>테스트를 보세요 ‹/›CSS 강의: CSS3 빛그림자