【Tailwind和訳】EFFECTS/Background Blend Mode

この記事について

この記事は、EFFECTS/Background Blend Modeの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Background Blend Mode(v2.1+)

要素の背景画像が背景色とどのように調和するかを制御するためのユーティリティです。

クラス	プロパティ
bg-blend-normal	background-blend-mode: normal;
bg-blend-multiply	background-blend-mode: multiply;
bg-blend-screen	background-blend-mode: screen;
bg-blend-overlay	background-blend-mode: overlay;
bg-blend-darken	background-blend-mode: darken;
bg-blend-lighten	background-blend-mode: lighten;
bg-blend-color-dodge	background-blend-mode: color-dodge;
bg-blend-color-burn	background-blend-mode: color-burn;
bg-blend-hard-light	background-blend-mode: hard-light;
bg-blend-soft-light	background-blend-mode: soft-light;
bg-blend-difference	background-blend-mode: difference;
bg-blend-exclusion	background-blend-mode: exclusion;
bg-blend-hue	background-blend-mode: hue;
bg-blend-saturation	background-blend-mode: saturation;
bg-blend-color	background-blend-mode: color;
bg-blend-luminosity	background-blend-mode: luminosity;

使い方

bg-blend-{mode}ユーティリティーを使って、要素の背景画像を背景色にブレンドする方法を制御します。

<div class="bg-blend-multiply ...">
  <!-- ... -->
</div>

レスポンシブ

特定のブレークポイントで background-blend-mode プロパティを制御するには、既存の background-blend-mode ユーティリティに {screen}: というプレフィックスを追加します。例えば、md:bg-blend-darkenを使用すると、bg-blend-darkenユーティリティを中程度の画面サイズ以上でのみ適用します。

<div class="bg-blend-lighten md:bg-blend-darken ...">
  <!-- ... -->
</div>

Tailwind のレスポンシブデザイン機能の詳細については、レスポンシブデザインのドキュメントをご参照ください。

カスタマイズ

バリアント

デフォルトでは、background-blend-mode のユーティリティには、レスポンシブバリアントのみが生成されます。

tailwind.config.js ファイルの variants セクションにある backgroundBlendMode プロパティを変更することで、バックグラウンドブレンドモードのユーティリティー用に生成されるバリアントをコントロールすることができます。

例えば、このコンフィグはホバーとフォーカスのバリアントも生成します。

tailwind.config.js

  module.exports = {
    variants: {
      extend: {
        // ...
+       backgroundBlendMode: ['hover', 'focus'],
      }
    }
  }

無効化

プロジェクトで背景ブレンドモードのユーティリティを使用する予定がない場合は、設定ファイルの corePlugins セクションで backgroundBlendMode プロパティを false に設定することで、完全に無効化することができます。

tailwind.config.js

  module.exports = {
    corePlugins: {
      // ...
+     backgroundBlendMode: false,
    }
  }