バックグラウンドポジション

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

Class reference

Class
Properties
.bg-bottombackground-position: bottom;
.bg-centerbackground-position: center;
.bg-leftbackground-position: left;
.bg-left-bottombackground-position: left bottom;
.bg-left-topbackground-position: left top;
.bg-rightbackground-position: right;
.bg-right-bottombackground-position: right bottom;
.bg-right-topbackground-position: right top;
.bg-topbackground-position: top;

使用方法

.bg-{side}ユーティリティを使用して、要素の背景画像の位置を制御します。

.bg-left-top

.bg-top

.bg-right-top

.bg-left

.bg-center

.bg-right

.bg-left-bottom

.bg-bottom

.bg-right-bottom

<div class="bg-no-repeat bg-left-top bg-gray-400 w-24 h-24" style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-top bg-gray-400 w-24 h-24" style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-right-top bg-gray-400 w-24 h-24" style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-left bg-gray-400 w-24 h-24" style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-center bg-gray-400 w-24 h-24" style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-right bg-gray-400 w-24 h-24" style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-left-bottom bg-gray-400 w-24 h-24" style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-bottom bg-gray-400 w-24 h-24" style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-right-bottom bg-gray-400 w-24 h-24" style="background-image: url(...);"></div>

レスポンシブ

特定のブレークポイントでの要素の背景画像の位置を制御するには、既存の背景位置ユーティリティに {screen}:プレフィックスを追加します。 たとえば、クラス md:bg-topを要素に追加すると、中程度の画面サイズ以上でbg-topユーティリティが適用されます。

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

<div class="bg-center sm:bg-top md:bg-right lg:bg-bottom xl:bg-left ..." style="background-image: url(...)"></div>

カスタマイズ

バックグラウンドポジション

デフォルトでは、Tailwindは9つのbackground-positionユーティリティを提供します。Tailwind構成のtheme.backgroundPositionセクションを編集して、これらを変更、追加、または削除します。

  // tailwind.config.js
  module.exports = {
    theme: {
      backgroundPosition: {
        bottom: 'bottom',
+       'bottom-4': 'center bottom 1rem',
        center: 'center',
        left: 'left',
-       'left-bottom': 'left bottom',
-       'left-top': 'left top',
        right: 'right',
        'right-bottom': 'right bottom',
        'right-top': 'right top',
        top: 'top',
+       'top-4': 'center top 1rem',
      }
    }
  }

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

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

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

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

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

機能を使用しない場合

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

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

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

Tailwind UI is now in early access!