배경
background-image
엘리먼트의 배경 이미지를 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
bg-[<value>] | background-image: <value>; |
bg-(<custom-property>) | background-image: var(<custom-property>); |
bg-none | background-image: none; |
bg-linear-to-t | background-image: linear-gradient(to top, var(--tw-gradient-stops)); |
bg-linear-to-tr | background-image: linear-gradient(to top right, var(--tw-gradient-stops)); |
bg-linear-to-r | background-image: linear-gradient(to right, var(--tw-gradient-stops)); |
bg-linear-to-br | background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); |
bg-linear-to-b | background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); |
bg-linear-to-bl | background-image: linear-gradient(to bottom left, var(--tw-gradient-stops)); |
bg-linear-to-l | background-image: linear-gradient(to left, var(--tw-gradient-stops)); |
bg-linear-to-tl | background-image: linear-gradient(to top left, var(--tw-gradient-stops)); |
bg-linear-<angle> | background-image: linear-gradient(<angle> in oklab, var(--tw-gradient-stops)); |
-bg-linear-<angle> | background-image: linear-gradient(-<angle> in oklab, var(--tw-gradient-stops)); |
bg-linear(<custom-property>) | background-image: linear-gradient(var(--tw-gradient-stops, var(<custom-property>))); |
bg-linear-[<value>] | background-image: linear-gradient(var(--tw-gradient-stops, <value>)); |
bg-radial | background-image: radial-gradient(in oklab, var(--tw-gradient-stops)); |
bg-radial-(<custom-property>) | background-image: radial-gradient(var(--tw-gradient-stops, var(<custom-property>))); |
bg-radial-[<value>] | background-image: radial-gradient(var(--tw-gradient-stops, <value>)); |
bg-conic-<angle> | background-image: conic-gradient(from <angle> in oklab, var(--tw-gradient-stops)); |
-bg-conic-<angle> | background-image: conic-gradient(from -<angle> in oklab, var(--tw-gradient-stops)); |
bg-conic-(<custom-property>) | background-image: var(<custom-property>); |
bg-conic-[<value>] | background-image: <image>; |
from-<color> | --tw-gradient-from: <color>; |
from-<percentage> | --tw-gradient-from-position: <percentage>; |
from-(<custom-property>) | --tw-gradient-from: var(<custom-property>); |
from-[<value>] | --tw-gradient-from: <value>; |
via-<color> | --tw-gradient-via: <color>; |
via-<percentage> | --tw-gradient-via-position: <percentage>; |
via-(<custom-property>) | --tw-gradient-via: var(<custom-property>); |
via-[<value>] | --tw-gradient-via: <value>; |
to-<color> | --tw-gradient-to: <color>; |
to-<percentage> | --tw-gradient-to-position: <percentage>; |
to-(<custom-property>) | --tw-gradient-to: var(<custom-property>); |
to-[<value>] | --tw-gradient-to: <value>; |
예제
기본 예제
bg-[<value>] 문법을 사용해 엘리먼트의 배경 이미지를 설정할 수 있습니다:
<div class="bg-[url(/img/mountains.jpg)] ..."></div>선형 그라데이션 추가하기
bg-linear-to-r 및 bg-linear-<angle>과 같은 유틸리티를 그라데이션 색상 정지점 유틸리티와 함께 사용하여 엘리먼트에 선형 그라데이션을 추가할 수 있습니다:
<div class="h-14 bg-linear-to-r from-cyan-500 to-blue-500"></div><div class="h-14 bg-linear-to-t from-sky-500 to-indigo-500"></div><div class="h-14 bg-linear-to-bl from-violet-500 to-fuchsia-500"></div><div class="h-14 bg-linear-65 from-purple-500 to-pink-500"></div>방사형 그라데이션 추가하기
bg-radial과 bg-radial-[<position>] 유틸리티를 그라데이션 색상 정지점 유틸리티와 함께 사용하여 엘리먼트에 방사형 그라데이션을 추가할 수 있습니다.
<div class="size-18 rounded-full bg-radial from-pink-400 from-40% to-fuchsia-700"></div><div class="size-18 rounded-full bg-radial-[at_50%_75%] from-sky-200 via-blue-400 to-indigo-900 to-90%"></div><div class="size-18 rounded-full bg-radial-[at_25%_25%] from-white to-zinc-900 to-75%"></div>원뿔형 그라데이션 추가하기
색상 정지점 유틸리티와 함께 bg-conic 및 bg-conic-<angle> 유틸리티를 사용하여 엘리먼트에 원뿔형 그라데이션을 추가할 수 있습니다:
<div class="size-24 rounded-full bg-conic from-blue-600 to-sky-400 to-50%"></div><div class="size-24 rounded-full bg-conic-180 from-indigo-600 via-indigo-50 to-indigo-600"></div><div class="size-24 rounded-full bg-conic/decreasing from-violet-700 via-lime-300 to-violet-700"></div>그라데이션 색상 중단점 설정
그라데이션 중단점의 색상을 설정하려면 from-indigo-500, via-purple-500, to-pink-500와 같은 유틸리티를 사용하세요:
<div class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 ..."></div>그라데이션 중단점 위치 설정
from-10%, via-30%, to-90%와 같은 유틸리티를 사용하여 그라데이션 색상 중단점의 위치를 더 정밀하게 설정할 수 있습니다:
<div class="bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% ..."></div>보간 모드 변경하기
그라데이션의 보간 모드를 제어하려면 보간 수정자를 사용하세요:
srgb
hsl
oklab
oklch
longer
shorter
increasing
decreasing
<div class="bg-linear-to-r/srgb from-indigo-500 to-teal-400"></div><div class="bg-linear-to-r/hsl from-indigo-500 to-teal-400"></div><div class="bg-linear-to-r/oklab from-indigo-500 to-teal-400"></div><div class="bg-linear-to-r/oklch from-indigo-500 to-teal-400"></div><div class="bg-linear-to-r/longer from-indigo-500 to-teal-400"></div><div class="bg-linear-to-r/shorter from-indigo-500 to-teal-400"></div><div class="bg-linear-to-r/increasing from-indigo-500 to-teal-400"></div><div class="bg-linear-to-r/decreasing from-indigo-500 to-teal-400"></div>기본적으로 그라데이션은 oklab 색 공간에서 보간됩니다.
배경 이미지 제거하기
bg-none 유틸리티를 사용하면 엘리먼트의 기존 배경 이미지를 제거할 수 있습니다:
<div class="bg-none"></div>커스텀 값 사용하기
bg-linear-[<value>] 그리고 from-[<value>]와 같은 유틸리티를 사용하세요 gradient를 완전히 커스텀한 값으로 설정하려면:
<div class="bg-linear-[25deg,red_5%,yellow_60%,lime_90%,teal] ..."> <!-- ... --></div>CSS 변수를 사용하려면 bg-linear-(<custom-property>) 구문을 사용할 수도 있습니다:
<div class="bg-linear-(--my-gradient) ..."> <!-- ... --></div>이는 bg-linear-[var(<custom-property>)] 의 단축 표현으로, 자동으로 var() 함수를 추가해 줍니다.
반응형 디자인
접두사 a background-image 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<div class="from-purple-400 md:from-yellow-500 ..."> <!-- ... --></div>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
테마 커스터마이징
--color-* 테마 변수를 사용해 프로젝트에서 color 유틸리티를 커스터마이징할 수 있습니다:
@theme { --color-regal-blue: #243c5a; }이제 from-regal-blue,via-regal-blue, 그리고 to-regal-blue 같은 유틸리티를 마크업에서 사용할 수 있습니다:
<div class="from-regal-blue"> <!-- ... --></div>테마 커스터마이징에 대해 더 알아보려면 테마 문서를 참고하세요.
