[CSS3] background-origin 과 background-clip

사용가능한 브라우저

익스플로러 9.0 | 파이어폭스 4.0 | 크롬 10.0 | 오페라 10.6 | 사파리모바일 4.3.3 | 안드로이드 2.2

 

 

 

background-origin (background-origin:속성, 배경 이미지 위치 조절)

속성

padding-box :
기본값으로 padding영역부터 배경이미지를 배치함. 단 기준점 밖 영역은 repeat 된 배경으로 채운다.

(repeat 기능을 사용했을때.)

border-box : 
border의 바깥쪽 라인영역을 기준으로 배경이미지를 배치함.

content-box :
content영역부터 기준점으로 지정하여 배경이미지를 배치함. 단 기준점 밖 영역은 repeat 된 배경으로 채운다.
(repeat 기능을 사용했을때.)

 

 

 

 

 

background-clip (background-origin:속성, 배경 이미지 위치 조절)

속성

padding-box :
기본값으로 padding영역부터 배경 이미지를 표시함. 단 기준점 밖영역은 배경을 표시하지 않는다.
(repeat 기능을 사용했을때.)

border-box :
border의 안쪽 라인을 기준으로 배경이미지를 배치함. 단 기준점 밖 영역은 repeat 된 배경으로 채운다.
(repeat 기능을 사용했을때.

content-box :
content영역부터 기준점으로 지정하여 이미지를 배치함. 단 기준점 밖 영역은 배경을 표시하지 않는다.
(repeat 기능을 사용했을때.)

 

 

참고사이트

[참고]css3.inf : http://www.css3.info/preview/background-origin-and-background-clip/
[참고]네이버 NULI
http://html.nhndesign.com/html_guide/?css3/background-origin
http://html.nhndesign.com/html_guide/?css3/background-clip