• 회원가입
  • 로그인
  • 구글아이디로 로그인

[gradient] CSS - repeating-linear-gradient () 함수 - 반복 선형 그레이디언트 ※ 패턴 배경

repeating-linear-gradient () 예제

 

<style>

div {

  height: 200px;

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

}

</style>

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

 

결과보기

 

 

repeating-linear-gradient () 정의

 

선형 그래디언트 반복.

 


 

1.

기본 사용법은 linear-gradient와 유사

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


2.

CSS3

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

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

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

 

 

 

repeating-linear-gradient () 구문

 

background-image: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);

 


[매개변수]

angle 

그레이디언트 방향 각도. (0 ~ 360 deg) ※ deg (= degree 도, 각도. 정도)

 

side-or-corner 

그레이디언트 선의 시작점 위치. (두 개의 키워드로 구성) 

첫 번째 키워드: 가로축 (left 또는 right)

두 번째 키워드: 세로축 (top 또는 bottom)

순서는 관련이 없으며 각 키워드는 선택 사항임.
(예)
to left top (왼쪽 상단쪽으로)
to right (오른쪽으로)

0.25turn 

 

color-stop1, color-stop2, ... 

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

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


 

 

repeating-linear-gradient () 예제 

 

기본 예제

background-image: repeating-linear-gradient(#e66465, #e66465 20px, #9198e5 20px, #9198e5 25px);


angle (기울기) 예제

background-image: repeating-linear-gradient(45deg, red, blue 7%, green 10%);

background-image: repeating-linear-gradient(90deg, red, blue 7%, green 10%);

 

side-or-corner 예제

background-image: repeating-linear-gradient(to left top, blue, red 20px);

background-image: repeating-linear-gradient(to right, red 0%, green 10%, red 20%);

 

함수 2개 이상 사용

background-image: repeating-linear-gradient(transparent, #4d9f0c 40px), repeating-linear-gradient(0.25turn, transparent, #3f87a6 20px);

 

더 자세한 건 아래 좌표 참고

https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
intro CSS - 정의・장점・구문・초기화 + 주석
intro CSS - 발전사 (CSS1 → CSS2.01 → CSS) + 제작관리 단체
intro CSS - 스타일 적용 방법 3가지 ★★★ - (인라인스타일 / 내부스타일 / 외부스타일) CSS적용순서 +…
selector CSS - 선택자 (Selector) 종류 + 선택자에 사용가능한 문자 (= 선택자 이름짓기 주의사항)
selector CSS - ID선택자, class선택자 + CSS우선순위 ★★★ (= 아이디선택자, 클래스선택자, CSS명시…
selector CSS - * 전체선택자 - 모든 요소 선택. (요소선택자군) ※ 아스테리크 (asterisk) 선택자 = …
selector CSS - element 요소선택자 ★ - 지정 요소 선택. (요소선택자군)
selector CSS - element,element 병렬선택자 ★ - 쉼표로 나열된 여러 요소 선택. (= 여러 요소선택…
selector CSS - element element 자손선택자 ★ - 자손요소 (요소선택자)
selector CSS - element>element 자식선택자 ★ - 직접 자식요소만 선택. (요소선택자, IE7)
selector CSS - element+element 인접선택자 ★★ - 바로 뒤 인접형제요소 (요소선택자, IE7) + …
selector CSS - element~element 형제선택자 ★★ - 지정요소 뒤의 모든 특정형제요소 (요소선택자군…
selector CSS - [attribute] 속성선택자 - 특정 속성 보유 요소 (IE7) ※ 여러 속성 보유 선택자
selector CSS - [attribute=value] 속성선택자 - 지정속성값보유요소 선택 (IE7) ※ 특정 (속성/…
1/25
목록
찾아주셔서 감사합니다. Since 2012