🪄

【Tailwind和訳】EFFECTS/Background Blend Mode

2021/10/24に公開約2,600字

この記事について

この記事は、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,
    }
  }

Discussion

ログインするとコメントできます