배경
background-origin
엘리먼트의 배경이 테두리, 패딩, 콘텐츠 영역에 상대적으로 어떻게 위치할지 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
bg-origin-border | background-origin: border-box; |
bg-origin-padding | background-origin: padding-box; |
bg-origin-content | background-origin: content-box; |
예제
기본 예제
bg-origin-border, bg-origin-padding, bg-origin-content 유틸리티를 사용하여 엘리먼트의 배경이 렌더링되는 위치를 제어할 수 있습니다:
bg-origin-border
bg-origin-padding
bg-origin-content
<div class="border-4 bg-[url(/img/mountains.jpg)] bg-origin-border p-3 ..."></div><div class="border-4 bg-[url(/img/mountains.jpg)] bg-origin-padding p-3 ..."></div><div class="border-4 bg-[url(/img/mountains.jpg)] bg-origin-content p-3 ..."></div>반응형 디자인
접두사 a background-origin 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<div class="bg-origin-border md:bg-origin-padding ..."> <!-- ... --></div>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
