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…