English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
CSS 함수 repeating-linear-gradient()은 반복적인 선형 그레이딩으로 구성된 <image>을 생성합니다. 이는 linear-gradient 함수는 동일한 매개변수를 사용하지만, 모든 방향에서 반복적으로 그레이딩을 반복하여 전체 컨테이너를 덮습니다. 이 함수의 결과는 <gradient> 데이터 타입의 객체로, 이는 특별한 <image> 타입입니다.
반복적인 선형 그레이딩:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>기본 교본(oldtoolbag.com)</title>
<style>
#grad1 {
높이: 200px;
배경-color: red; /* 브라우저가 지원하지 않을 때 표시됩니다 */
배경-이미지: repeating-linear-gradient(red, yellow 10%, green 20%);
}
#grad2 {
높이: 200px;
배경-color: red; /* 브라우저가 지원하지 않을 때 표시됩니다 */
배경-이미지: repeating-linear-gradient(45deg,red,yellow 7,green 10%);
}
#grad3 {
높이: 200px;
배경-color: red; /* 브라우저가 지원하지 않을 때 표시됩니다 */
배경-이미지: repeating-linear-gradient(190deg,red,yellow 7,green 10%);
}
#grad4 {
높이: 200px;
배경-color: red; /* 브라우저가 지원하지 않을 때 표시됩니다 */
배경-이미지: repeating-linear-gradient(90deg,red,yellow 7,green 10%);
}
</style>
</head>
<body>
<h1>반복적인 선형 그레이딩</h1>
<div id="grad1></div>
<p>45deg:</p>
<div id="grad2></div>
<p>190deg:</p>
<div id="grad3></div>
<p>90deg:</p>
<div id="grad4></div>
<p><strong>주의:</strong> Internet Explorer 9 및 이전 버전의 IE 브라우저는 선형 그레이딩을 지원하지 않습니다.</p>
</body>
</html>테스트를 보세요 ‹/›repeating-linear-gradient() 함수는 반복적인 선형 그레이딩 "이미지"를 생성합니다.
지원 버전: CSS3
표에 나타난 숫자는 해당 함수를 지원하는 첫 번째 브라우저 버전 번호를 나타냅니다.
"webkit" 또는 "moz" 또는 "o"로 지정된 숫자는 해당 함수를 지원하는 첫 번째 버전 번호 프리퍼스를 의미합니다.
| 함수 | |||||
|---|---|---|---|---|---|
| repeating-linear-gradient() | 26.0 10.0 -webkit- | 10.0 | 16.0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.1 -o- |
배경: repeating-linear-gradient(angle | to side-또는-cantor, color-stop1, color-stop2, ...);
| Value | 설명 |
|---|---|
| angle | 퍼블리싱의 각도 방향을 정의합니다. 0deg에서 360deg，기본적으로 180deg。 |
| 면-또는-cantor | 선형 퍼블리싱의 시작 위치를 지정합니다. 두 키워드로 구성됩니다: 첫 번째 키워드는 수평 위치(left 또는 right)를 지정하며, 두 번째 키워드는 수직 위치(top 또는 bottom)를 지정합니다. 순서는 상관없으며, 각 키워드는 선택 사항입니다. |
| color-stop1, color-stop2,... | 퍼블리싱의 시작과 끝 색상을 지정합니다. 색상 값, 중지 위치(선택 사항, 백분율로 지정)로 구성됩니다. |
다른 반복 선형 퍼블리싱:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>기본 교본(oldtoolbag.com)</title>
<style>
#grad1 {
높이: 200px;
배경-이미지: repeating-linear-gradient(45deg,red,blue 7,green 10%);
}
#grad2 {
높이: 200px;
배경-이미지: repeating-linear-gradient(190deg,red,blue 7,green 10%);
}
#grad3 {
높이: 200px;
배경-이미지: repeating-linear-gradient(90deg,red,blue 7,green 10%);
}
</style>
</head>
<body>
<h3>반복 선형 퍼블리싱</h3>
<p>45 도 선형 퍼블리싱, 빨강에서 파란색으로：</p>
<div id="grad1></div>
<p>190 도 선형 퍼블리싱, 빨강에서 파란색으로：</p>
<div id="grad2></div>
<p>90 도 선형 퍼블리싱, 빨강에서 파란색으로：</p>
<div id="grad3></div>
<p><strong>주의：</strong> Internet Explorer 9 및 이전 버전 IE 브라우저는 퍼블리싱을 지원하지 않습니다.</p>
</body>
</html>테스트를 보세요 ‹/›CSS 교본: CSS3 퍼블리싱