バックグラウンドアタッチメント

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

Class reference

Class
Properties
.bg-fixedbackground-attachment: fixed;
.bg-localbackground-attachment: local;
.bg-scrollbackground-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を使用して、中程度の画面サイズ以上でのみbg-fixedユーティリティを適用します。

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

<div class="bg-fixed sm:bg-local md:bg-scroll lg:bg-local xl:bg-fixed ...">
  <!-- ... -->
</div>

カスタマイズ

レスポンシブと疑似バリアントクラス

デフォルトでonly responsive バリアントはbackground attachment utilitiesのために作られます。

あなたはどのバリアントがbackground attachment utilitiesのために作られるかを tailwind.config.jsファイル内のvariantsセクションのbackgroundAttachmentプロパティを修正することによってコントロールできます。

例として、この設定は also hover and focus バリアントを作ります。

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     backgroundAttachment: ['responsive'],
+     backgroundAttachment: ['responsive', 'hover', 'focus'],
    }
  }

機能を使用しない場合

もしbackground attachment utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのbackgroundAttachment propertyfalseに設定することで完全に無効にすることができます。

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

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!