[css3] repeating gradient (반복형 그레디언트)

 

 

[css3] repeating gradient (반복형 그레디언트)

 

반복형 그레디언트는, 그레디언트를 반복 패턴으로 보여줍니다.

 

선형 그레디언트는, 반지름형 그레디언트 모두 반복 패턴으로 만들 수 있습니다.

 

두 강좌 먼저 읽고 오시면 이해하기 쉬울 거예요~

 

gradient (linear-gradient) 사용법

 

gradient (radial-gradient)

 

 

☆repeating-linear-gradient 반복형 선형 그라디언트

 

linear-gradient 문법과 비슷합니다.

 

 

최소 2가지 이상의 색상을 선택하고, 색상의 위치도 지정할 수 있습니다.

 

▶예

 

#linear1{background:repeating-linear-gradient(white, yellow 20px, green 40px);}

 

linear-gradient와 다른 점이 있다면, 반복 패턴으로 보여준다는 것.

 

white가 시작점, yellow 20px는 중간색이며, green 40px는 마지막 색상점입니다.

 

그레디언트 크기는 마지막 색상점 위치와 크기와 동일합니다. 이 예에서는 40px.

 

이 40px가 반복 패턴으로 보이게 됩니다. 

 

 

[비교해서 보기]

 

 

 

2번 예를 보면, 색상이 점차적으로 희미해지는데, 색상이 뚜렷한 줄 무늬를 반복적으로 보여주려면 어떻게 할까요?

 

아래 3번 예처럼, 4가지 색상 선택을 하면 됩니다.

 

white는 시작점, 두번째 white 위치는 20px, 그러므로 0과 20px 사이는  흰색으로만 나타납니다.

 

20px부터 40px 지점까지는 갈색 색상으로만 나타납니다.

 

 

이번엔 선을 좀 더 가늘게 표시해 보겠습니다.

 

아래 4번 예에서는, 38px부터 40 px 지점까지만 갈색으로 표시가 됩니다.

 

 

이번에는, 각도를 이용해 대각선 방향으로 만들어 보겠습니다.

 

#re-linear4{background:repeating-linear-gradient(45deg, white, white 20px, #997000 20px, #997000 40px);} 

 

 

 

 

☆repeating-radial-gradient 반복형 반지름형 그레디언트

 

repeating-radial-gradient라고 쓰는 것 빼고는 사용법은 반지름형 그레디언트와 동일합니다.

 

#re-radial1{background:repeating-radial-gradient(white, white 20px, #997000 20px, #997000 40px);}

 

 

▶브라우저 지원

 

표준 문법 : ie10.0+, chrome 26.0, firefox 16.0+, safari 6.1+, opera 12.1+

 

접두어 버전 :
chrome 10.0+과 safari 5.1+은 -webkit-
                   firefox 3.6+ 은 -moz- 
                    opera 11.1+은 -o-

*  repeating-linear-gradient은,  opera 11.1+부터 접두어 버전을 지원하고

   repeating-radial-gradient은, opera 11.6+부터 지원

 

 

▶사용 예

#re-radial{
  background: -webkit-repeating-radial-gradient(white, white 38px, brown 40px);  /*사파리 5.1~ 6.0, 크롬 10~25 */
  background: -o-repeating-radial-gradient(white, white 38px, brown 40px);  /* 오페라11.6~12.0 */
  background: -moz-repeating-radial-gradient(white, white 38px, brown 40px);  /*파이어폭스3.6~15 */
  background: repeating-radial-gradient(white, white 38px, brown 40px);  /* 표준*/
}

 

참조: http://www.hongkiat.com/blog/css3-repeating-gradients/

 

 

 

background-repeat 속성(배경 이미지 패턴)

 

background-position 속성(배경이미지 위치 지정)

 

background-size 속성(배경이미지 크기 조절)

 

background 속성(배경 전체 지정)