background-clip

정의 및 사용

background-clip 은 해당 영역에서 배경이미지를 나타낼 기준을 어디로 잡을지를 지정한다. 일반적으로 어떤 div 영역에서 border 나 padding 속성이 주어지면 콘텐츠의 영역의 크기가 달라지므로 거기에 따라 배경이미지도 padding 영역을 포함한 부분에 뿌려질지 border 영역을 포함한 영역에 뿌려질지 순수하게 콘텐츠 영역만 뿌려질지를 지정할 수 있게 되는 것이다.

정의 및 사용
기본값 border-box
상속 no
버전 CSS3
자바스크립트 구문 object.style.backgroundClip=”content-box”

브라우저 지원

IE6 지원 안함IE7 지원 안함IE8 지원 안함Chrome 지원Firefox 지원Opera 지원Safari 지원

IE 브라우저 외 모두 지원 (IE 계열은 9 부터 지원, Safari 는 -webkit- 접두사 사용시 사용 가능)

구문

속성 값 설명
설명
boeder-box 테두리 영역까지 배경이미지를 나타냄
padding-box 패딩값을 포함한 영역까지 배경이미지를 나타냄
content-box 콘텐츠 영역만 배경이미지를 나타냄

예제

버그 및 이슈

소제목

목록 으로

  • Lacefrontwig

    2012년 12월 11일, 3:50 오전

    [답변]

    깔끔하게 정리해 놓으셔서 많은 도움이 됬습니다. 수고하세요^^

    • HYLA

      2012년 12월 21일, 11:59 오전

      [답변]

      감사합니다 2013년 v2.0으로 더 좋은 콘텐츠 준비하겠습니다. ^^

댓글