CSS 참조 설명서

CSS @규칙(RULES)

CSS 속성大全

CSS3 background-origin 속성 사용 방법 및 예제

CSS 배경-origin 속성은 배경의 정위치 영역을 지정합니다. 즉, 다음과 같이 사용됩니다:background-image속성이 지정한 이미지 원점의 위치를 지정합니다.

이 표는 이 속성의 사용 시나리오와 버전 역사를 요약합니다.

기본 값:	padding-box
적용 대상:	모든 요소에도 적용됩니다. 또한 다음에도 적용됩니다:::first-letter와::first-line。
thừa kế:	없음
애니메이션 제작 가능:	아니요。보기: 애니메이션 속성。
버전:	CSS3의 새 기능
JavaScript 문법:	object　　　object.style.backgroundOrigin="content-box"

background-origin 사용 문법

이 속성의 문법은 다음과 같습니다:

background-origin: border-box | padding-box | content-box | initial | inherit

아래 예제는 background의 사용 방법을 설명합니다.-origin 속성.

예제

.box {
　　　　width:　250px;
　　　　height:　150px;
　　　　padding:　10px;
　　　　border:　6px dashed #333;
　　　　background: url("images/sky.jpg) no-repeat;
　　　　background-size: contain;
　　　　background-origin: content-box;
}

시험해보세요‹/›

주의:이 background-origin 값 속성이 무시됨background-attachment속성이 fixed로 지정됩니다.

속성 값

아래 표는 이 속성의 값을 설명합니다.

값	설명
border-box	배경이 테두리의 외부 경계까지 확장됩니다. 테두리 아래에는 배경이 그려집니다.
padding-box	배경이 채우기의 외부 경계까지 확장됩니다. 테두리 아래에는 배경이 그려지지 않습니다. 기본 값입니다.
content-box	배경이 내용 상자 내에만(剪切됨) 그려집니다. 테두리와 채우기 영역 아래에는 배경이 그려지지 않습니다.
initial	이 속성을 기본 값으로 설정합니다.
inherit	지정된 경우, 관련 요소는 부모 요소의 background를 사용합니다.-origin 속성의 계산 값.

브라우저 호환성

background-origin 속성의 브라우저 호환성, 모든 주요 브라우저가 이 속성을 지원합니다.

	파이어폭스 4+ 구글 크롬4+ 인터넷 익스플로러 9+ 애플 사파리 3+ 오페라 10。5+

더 읽기

다음 튜토리얼을 참조하십시오:CSS3배경，CSS3배경。

CSS 배경-position 속성 CSS 배경-image 속성