background-origin
속성 사용법
background-origin
속성은
요소 박스의 배경 이미지를 어느 영역을 기준으로 포지셔닝할지 설정합니다.
이 속성은 세 가지 옵션으로 padding-box
, border-box
, content-box
중 하나를 선택하여 배경 이미지 포지셔닝의 기준(origin, 시작점) 영역으로 지정합니다.
<div></div>
div {
aspect-ratio: 1.5;
padding: 30px;
border: 10px dashed yellowgreen;
background-color: #f2f2f2;
background-image: url("earth.jpg");
background-repeat: no-repeat;
background-size: 70px auto;
background-position: left top;
background-origin: padding-box; /* 초깃값 */
}
참고하세요!
요소의 배경(색상이나 이미지)은 항상 border
뒤에 그려집니다.
값
border-box |
요소 박스의 border-box 를 포지셔닝의 기준 영역으로 지정합니다. |
---|---|
padding-box |
초깃값임.
요소 박스의 padding-box 를 포지셔닝의 기준 영역으로 지정합니다. |
content-box |
요소 박스의 content-box 를 포지셔닝의 기준 영역으로 지정합니다. |
background-origin
속성의 값에 대한 용어 설명은 다음과 같습니다.
border-box
:border
의 가장자리까지의 영역을 의미합니다.padding-box
:padding
의 가장자리까지의 영역을 의미합니다.content-box
: 요소의 실제 내용이 위치하는 영역입니다. 글자, 이미지, 동영상 등이 여기에 포함됩니다. 이러한 콘텐츠 가장자리까지의 영역을 의미합니다.
이 용어들은 요소 박스의 Box model을 통해 확인할 수 있습니다.
![box model](https://codingeverybody.kr/wp-content/uploads/box-model.jpg)
CSS의 Box model은 웹 페이지에서 요소의 구조와 레이아웃을 정의하는 개념입니다. 각 HTML 요소는 content(내용), padding(패딩), border(테두리), margin(마진)으로 구성되어 있습니다. 이러한 구성 요소들이 상자 모양을 이루어서 "Box model"이라고 불립니다.
형식 구문
selector {
background-origin: [ border-box | padding-box | content-box ] || Global values
/*
Global values:
inherit | initial | revert | revert-layer | unset
*/
}
형식 정의
초깃값 | padding-box |
---|---|
적용 요소 | 모든 요소 |
상속 | 아니오 |
예제 - 두 개의 그라디언트 사용하기
이 예제에서는 .box
에 두꺼운 점선 테두리가 있습니다. 첫 번째 그라디언트는 padding-box
를 배경 원점으로 사용하므로 배경은 테두리 안에 위치합니다. 두 번째는 content-box
를 사용하므로 콘텐츠 영역에만 표시됩니다.
CSS에서 그라디언트 구현은 background-image
속성을 사용합니다. 따라서, background-origin
속성을 적용할 수 있습니다.
<div class="box">코딩에브리바디</div>
.box {
color: #fff;
background-image: linear-gradient(
to right,
rgba(255, 0, 0, 0.5),
rgba(0, 0, 255, 0.5),
rgba(0, 128, 0, 0.5)
),
radial-gradient(circle, gold, silver);
border: 15px dashed yellowgreen;
padding: 15px;
background-origin: padding-box, content-box;
background-repeat: no-repeat;
}
코딩에브리바디
브라우저 호환성
속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
background-origin
|
1 | 12 | 4 | 3 |
명세서
명세서 사양 | |
---|---|
background-origin
|
CSS Backgrounds and Borders Module Level 3 #the-background-origin |