ドキュメントブログショーケースPlus
  1. 背景
  2. background-image

背景

background-image

要素の背景画像を制御するためのユーティリティ。

クラススタイル
bg-[<value>]
background-image: <value>;
bg-(image:<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-[<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%のようなユーティリティを使用します

10%
30%
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>]を設定するにはグラデーション完全にカスタム値に基づいています

<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>

テーマのカスタマイズの詳細については、 テーマのドキュメント.

このページ内

著作権 © 2025 Tailwind Labs Inc.·商標ポリシー