Properties

Properties

Editing
  • account_tree
  • bug_report

background-origin

요소 내 배경 이미지의 원점 위치를 설정한다.

사용 가능한 값 타입

<'background-origin'>

DEVDIC-Specified Data Types

background-origin 속성에 사용되는 값을 나타낸다. 다중 배경인 경우 콤마로 구분된 연속된 값을 가질 수 있다.

  • CSS Backgrounds and Borders Module Level 3
    <box>#

포함된 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

  • <box>

    배경이 그려지는 영역을 결정하는 배경 페인팅 영역을 설정하는 값을 나타낸다.

    • CSS Backgrounds and Borders Module Level 3
      border-box | padding-box | content-box
    Details

    사용되는 키워드

    • border-box

      CSS Box Model Module Level 3

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

    • content-box

      CSS Box Model Module Level 3

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

    • padding-box

      CSS Box Model Module Level 3

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

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

  • 〈box〉padding-box
    CSS Box Model Module Level 3

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

    배경 이미지의 시작 위치를 요소의 테두리를 제외한 왼쪽 상단으로 설정한다.

  • 〈box〉border-box
    CSS Box Model Module Level 3

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

  • 〈box〉content-box
    CSS Box Model Module Level 3

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

구문

  • background-origin: content-box;
    CSS Backgrounds and Borders Module Level 3

    배경 이미지가 시작되는 원점 위치를 주어진 상수 값으로 설정한다.

  • object.style.backgroundOrigin = "content-box";
    CSS Backgrounds and Borders Module Level 3

    자바스크립트 형식

예제

값 설정에 따른 결과 예시

버전 명세

Modules
Module NameStatusSummary
CSS Backgrounds and Borders Module Level 3

Last review date: 2022-7-9

지원 웹브라우저