zfb
GitHub リポジトリ

検索したい単語を入力

いつでも検索バーを開ける

背景色

設定された値または検証済みの任意の色から背景色を設定します。

文字色とは独立して、要素の背景色を指定します。

クラスと CSS の早見表

クラスの例期待される宣言
bg-panelbackground-color: var(--zw-color-panel);
bg-accent/18background-color: color-mix(in oklab, var(--zw-color-accent) 18%, transparent);
例の設定

共通プレビュー設定では spec 1、reset: "none"、strict モード、tokens.spacingUnit: "0.25rem"、ブレークポイントなしを明示しています。名前付きの値は各例で設定し、既定のパレットやテーマは継承しません。wind-demo クラスはデモ用の自作スタイルです。各例では、その CSS とユーティリティの宣言を分けて確認できます。

使い方の例

前景色と背景色のトークンを組み合わせる

明るい panel と濃い accent を設定し、各面で読みやすくなるよう文字色を別に指定しています。

前景色と背景色のトークンを組み合わせる
HTML
<div class="wind-demo-backgrounds"><div class="wind-demo-card bg-panel text-ink">Light panel · configured surface</div><div class="wind-demo-card bg-accent text-white">Dark accent · white text</div></div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-color-accent: #075985;
    --zw-color-alert: #8b1e3f;
    --zw-color-focus: #0f766e;
    --zw-color-ink: #16324f;
    --zw-color-panel: #edf4f8;
    --zw-color-white: #fff;
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-backgrounds {
  max-width: 30rem;
  font: 15px / 1.5 system-ui, sans-serif;
}

.wind-demo-card {
  margin: 0 0 .65rem;
  padding: .8rem 1rem;
}
.text-ink {
  color: var(--zw-color-ink);
}
.text-white {
  color: var(--zw-color-white);
}
.bg-accent {
  background-color: var(--zw-color-accent);
}
.bg-panel {
  background-color: var(--zw-color-panel);
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "colors": {
        "ink": "#16324f",
        "accent": "#075985",
        "focus": "#0f766e",
        "alert": "#8b1e3f",
        "panel": "#edf4f8",
        "white": "#ffffff"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-backgrounds": true,
      "wind-demo-card": true
    },
    "safelist": {
      "docs-preview": [
        "bg-accent",
        "bg-panel",
        "text-ink",
        "text-white"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-backgrounds { max-width: 30rem; font: 15px/1.5 system-ui, sans-serif; }
.wind-demo-card { margin: 0 0 0.65rem; padding: 0.8rem 1rem; }

文字を薄くせず背景に色を加える

bg-accent/18 は背景色だけを透明色と混ぜ、text-ink は不透明のままです。もう一方は個別の CSS 色を使います。

文字を薄くせず背景に色を加える
HTML
<div class="wind-demo-backgrounds"><div class="wind-demo-card bg-accent/18 text-ink">Accent at 18 percent over the white preview page</div><div class="wind-demo-card bg-[#e7f0f5] text-ink">Custom pale surface</div></div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-color-accent: #075985;
    --zw-color-alert: #8b1e3f;
    --zw-color-focus: #0f766e;
    --zw-color-ink: #16324f;
    --zw-color-panel: #edf4f8;
    --zw-color-white: #fff;
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-backgrounds {
  max-width: 30rem;
  font: 15px / 1.5 system-ui, sans-serif;
}

.wind-demo-card {
  margin: 0 0 .65rem;
  padding: .8rem 1rem;
}
.text-ink {
  color: var(--zw-color-ink);
}
.bg-\[\#e7f0f5\] {
  background-color: #e7f0f5;
}
.bg-accent\/18 {
  background-color: color-mix(in oklab, var(--zw-color-accent) 18%, transparent);
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "colors": {
        "ink": "#16324f",
        "accent": "#075985",
        "focus": "#0f766e",
        "alert": "#8b1e3f",
        "panel": "#edf4f8",
        "white": "#ffffff"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-backgrounds": true,
      "wind-demo-card": true
    },
    "safelist": {
      "docs-preview": [
        "bg-[#e7f0f5]",
        "bg-accent/18",
        "text-ink"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-backgrounds { max-width: 30rem; font: 15px/1.5 system-ui, sans-serif; }
.wind-demo-card { margin: 0 0 0.65rem; padding: 0.8rem 1rem; }

任意値と名前付きの値

bg-panel のような名前は tokens.colors に設定します。bg-current と bg-transparent もキーワードとして使えます。bg-[#e7f0f5] のように角括弧で CSS 色を指定できます。色のスラッシュ修飾子には 0〜100 の整数を使い、背景色だけを transparent と混ぜます。要素内の文字全体が薄くなるわけではありません。Tailwind のパレットは仮定しません。

関連ガイド: ユーティリティの文法 · バリアント

カタログの詳細

bg

フィールド値
カタログ識別子v1.background
クラスパターンbg-<suffix>
文法{"acceptedKinds":["keyword","token","arbitrary"],"arbitraryProperty":"background-color","allowsFractionSlash":false,"allowsColorOpacity":true}
受け入れる値2
トークンカテゴリcolors
負の値の規則forbidden
競合グループと順位background (23)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティbackground-color

受け入れる値

種類接尾辞出力される値
keyword"transparent""transparent"
keyword"current""currentColor"

宣言テンプレート

プロパティ値の種類固定値
background-colorresolvednull

カタログの例

クラスの例期待される宣言
bg-[red]/40background-color: color-mix(in oklab, red 40%, transparent)

Revision History

作成更新