CSS / background-clip - 배경을 어디에 넣을지 정하는 속성

개요

HTML 요소는 박스(box)로 이루어져 있습니다. 배경 이미지나 배경색을 그 박스 중 어디에 넣을 지 정하는 속성이 background-clip입니다.

  • 기본값 : border-box
  • 상속 : No
  • 애니메이션 : No
  • 버전 : CSS Level 3

문법

  • border-box : 테두리 영역과 그 안쪽 영역을 채웁니다.
  • padding-box : 안쪽 여백 영역과 그 안쪽 영역을 채웁니다.
  • content-box : 내용 영역과 그 안쪽 영역을 채웁니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

예제

background-clip 속성 값에 따라 어디를 채우는지를 확인하는 예제입니다.

브라우저 지원

  • Chrome : 4.0+
  • Firefox : 4.0+
  • Internet Explorer : 9.0+
  • Opera : 10.5+
  • Safari : 3.0+