【Tailwind和訳】BACKGROUNDS/Background Attachment

この記事について

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

Background Attachment

スクロール時の背景画像の動作を制御するユーティリティ。

Class	Properties
bg-fixed	background-attachment: fixed;
bg-local	background-attachment: local;
bg-scroll	background-attachment: scroll;

Fixed

ビューポートに対して背景画像を固定するには、bg-fixedを使用します。

<div class="bg-fixed ..." style="background-image: url(...)"></div>

Local

コンテナとビューポートで背景画像をスクロールするには、bg-localを使用します。

<div class="bg-local ..." style="background-image: url(...)"></div>

Scroll

背景画像をビューポートとともにスクロールするにはbg-scrollを使用しますが、コンテナとともにスクロールすることはできません。

<div class="bg-scroll ..." style="background-image: url(...)"></div>

レスポンシブ

特定のブレイクポイントにおける要素のバックグラウンドアタッチメントを制御するには、既存のバックグラウンドアタッチメントユーティリティに{screen}: というプレフィックスを追加します。例えば、md:bg-fixedを使用すると、medium スクリーンサイズ以上でのみbg-fixedユーティリティが適用されます。

<div class="bg-local md:bg-fixed ...">
  <!-- ... -->
</div>

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

カスタマイズ

バリアント

デフォルトでは、レスポンシブバリアントのみがバックグラウンドアタッチメントユーティリティのために生成されます。

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

例えば、この設定ではhoverとfocusのバリアントも生成されます。

tailwind.config.js

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

無効化

バックグラウンドアタッチメントユーティリティをプロジェクトで使用しない場合は、設定ファイルのcorePluginsセクションでbackgroundAttachmentプロパティをfalseに設定することで、完全に無効化することができます。

tailwind.config.js

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