background-origin
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 7월.
CSS background-origin 속성은 배경의 원점을 테두리 시작점, 테두리 내부, 안쪽 여백 내부 중 하나로 지정합니다.
시도해 보기
background-origin: border-box; background-repeat: no-repeat; background-origin: padding-box; background-repeat: no-repeat; background-origin: content-box; background-repeat: no-repeat; <section id="default-example"> <div id="example-element">This is the content of the element.</div> </section> #example-element { background-image: url("/shared-assets/images/examples/leopard.jpg"); color: #d73611; text-shadow: 2px 2px black; padding: 20px; border: 10px dashed #333; font-size: 2em; font-weight: bold; } background-attachment가 fixed인 경우 background-origin은 무시됩니다.
구문
css
/* 키워드 값 */ background-origin: border-box; background-origin: padding-box; background-origin: content-box; /* 전역 값 */ background-origin: inherit; background-origin: initial; background-origin: unset; background-origin 속성은 다음 목록의 키워드 중 하나를 선택해 지정할 수 있습니다.
값
border-box-
배경을 테두리 박스에 상대적으로 배치합니다.
padding-box-
배경을 안쪽 여백 박스에 상대적으로 배치합니다.
content-box-
배경을 콘텐츠 박스에 상대적으로 배치합니다.
형식 정의
| 초기값 | padding-box |
|---|---|
| 적용대상 | all elements. It also applies to ::first-letter and ::first-line. |
| 상속 | no |
| 계산 값 | as specified |
| Animation type | a repeatable list |
형식 구문
background-origin =
<visual-box>#
<visual-box> =
content-box |
padding-box |
border-box
예제
배경 원점 설정하기
css
.example { border: 10px double; padding: 10px; background: url("image.jpg"); background-position: center left; background-origin: content-box; } css
#example2 { border: 4px solid black; padding: 10px; background: url("image.gif"); background-repeat: no-repeat; background-origin: border-box; } css
div { background-image: url("logo.jpg"), url("mainback.png"); /* Applies two images to the background */ background-position: top right, 0px 0px; background-origin: content-box, padding-box; } 명세
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # background-origin |
브라우저 호환성
Loading…