【Tailwind和訳】BACKGROUNDS/Background Image

この記事について

この記事は、BACKGROUNDS/Background Imageの記事を和訳したものです。

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

Background Image

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

Class	Properties
bg-none	background-image: none;
bg-gradient-to-t	background-image: linear-gradient(to top, var(--tw-gradient-stops));
bg-gradient-to-tr	background-image: linear-gradient(to top right, var(--tw-gradient-stops));
bg-gradient-to-r	background-image: linear-gradient(to right, var(--tw-gradient-stops));
bg-gradient-to-br	background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
bg-gradient-to-b	background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
bg-gradient-to-bl	background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
bg-gradient-to-l	background-image: linear-gradient(to left, var(--tw-gradient-stops));
bg-gradient-to-tl	background-image: linear-gradient(to top left, var(--tw-gradient-stops));

線形グラデーション

要素の背景を線形グラデーションにするには、bg-gradient-{direction}ユーティリティーの一つと、グラデーションカラーストップユーティリティーを組み合わせて使用します。

<div class="bg-gradient-to-r from-yellow-400 via-red-500 to-pink-500 ..."></div>

レスポンシブ

特定のブレークポイントにおける要素の背景画像を制御するには、既存の背景画像ユーティリティーに{screen}: というプレフィックスを追加します。例えば、md:bg-gradient-to-r を使用して、bg-gradient-to-r ユーティリティを中程度のスクリーンサイズ以上でのみ適用します。

<div class="bg-gradient-to-l md:bg-gradient-to-r ..."></div>

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

カスタマイズ

Background Images

デフォルトでは、Tailwind には 8 方向のリニアグラデーション背景を作成するための背景画像ユーティリティが含まれています。

独自の背景画像を追加するには、tailwind.config.js ファイルの theme.backgroundImage セクションを編集します。

tailwind.config.js

  module.exports = {
    theme: {
      extend: {
        backgroundImage: {
+         'hero-pattern': "url('/img/hero-pattern.svg')",
+         'footer-texture': "url('/img/footer-texture.png')",
        }
      }
    }
  }

これらはグラデーションに限らず、必要な背景画像であれば何でも構いません。

これらのクラスは bg-{key}の形をしているので、例えば hero-pattern は bg-hero-pattern となります。

バリアント

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

tailwind.config.js ファイルの variants セクションにある backgroundImage プロパティを変更することで、背景画像ユーティリティのために生成されるバリアントをコントロールすることができます。

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

tailwind.config.js

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

無効化

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

tailwind.config.js

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