Properties

Properties

Editing
  • account_tree
  • bug_report

background-clip

요소 내에서 배경이 적용되는 범위를 주어진 상수 값으로 클리핑(자름) 한다.

사용 가능한 값 타입

〈box〉

사용되는 키워드

  • border-box

    테두리가 있다면 테두리 영역까지의 범위를 정의한다. SVG 컨텍스트에서는 stroke-box와 동일한 값으로 사용된다.

  • content-box

    실제로 콘텐츠가 보여지는 범위를 정의한다. SVG 컨텍스트에서는 fill-box와 동일한 값으로 사용된다.

  • padding-box

    내부 여백이 있다면 테두리를 뺀 내부 여백 포함을 나타내는 범위를 정의한다. SVG 컨텍스트에서는 fill-box와 동일한 값으로 사용된다.

다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.

  • border-boxCSS3

    배경이 미치는 범위를 요소의 테두리까지 확장한다.

구문

  • background-clip border-box | padding-box | content-box;CSS3

    배경의 범위를 주어진 상수를 통해 잘라 설정한다.

  • object.style.backgroundClip = "content-box";CSS3

    자바스크립트 형식

예제

(1) 배경색에 대한 background-clip 속성 적용 예시

(2) 배경 이미지에 대한 background-clip 속성 적용 예

연관 목록

지원 웹브라우저