「及時」模式:全新世代的 Tailwind CSS
Tailwind CSS on GitHub

Background Position (背景位置)

控制元素 (Element) 背景圖片位置的功能

Default class reference

Class
屬性
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 ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-top ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-right-top ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-left ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-center ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-right ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-left-bottom ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-bottom ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-right-bottom ..." style="background-image: url(...);"></div>

響應式

如要讓元素的背景圖片位置有響應式效果,可在現有背景裁切功能前加上前綴詞 {screen}: 。例如:中型或以上的螢幕尺寸使用 md:bg-top 以套用 bg-top 功能。

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

更多有關 Tailwind 響應式設計功能的資訊,可參考 響應式設計 文件。

客製化

背景位置

Tailwind預設提供九種 background-position 功能。你可以編輯 Tailwind config 中的 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',
      }
    }
  }

變化模式

默認情況下, 只有 響應式 的 background position 變化模式 (variants) 會產生。

tailwind.config.jsvariants 區塊中變更 backgroundPosition 屬性來決定有哪些變化模式會生成。

舉個例子來說,這個設定將會生成 響應式 和 hover 的變化模式。

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

停用

如果你不打算在專案中使用 background position 功能,可以在你的設定檔裡的 corePlugins 屬性中將 backgroundPosition 設定為 false 來停用功能:

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