亮度

​基本用法

​變更元素亮度

使用 brightness-{amount?} 工具程式控制元素的亮度。

brightness-50

brightness-100

brightness-125

brightness-200

<div class="brightness-50 ...">
  <!-- ... -->
</div>
<div class="brightness-100 ...">
  <!-- ... -->
</div>
<div class="brightness-125 ...">
  <!-- ... -->
</div>
<div class="brightness-200 ...">
  <!-- ... -->
</div>

​移除濾鏡

若要一次移除元素上的所有濾鏡，請使用 filter-none 工具程式

<div class="blur-md invert brightness-150 md:filter-none">
  <!-- ... -->
</div>

當您想要有條件地移除濾鏡時，這會很有用，例如在滑鼠移入或特定斷點時。

​有條件地套用

​滑鼠移入、焦點和其他狀態

Tailwind 讓您可以在不同的狀態下使用變體修改器有條件地套用工具程式類別。例如，使用 hover:brightness-150 僅在滑鼠移入時套用 brightness-150 工具程式。

<div class="brightness-110 hover:brightness-150">
  <!-- ... -->
</div>

如需取得所有可用狀態修改器的完整清單，請查看 懸停、焦點及其他狀態 文件。

​斷點和媒體查詢

您也可以使用變異修改器來針對媒體查詢，例如回應式斷點、深色模式、偏好降低動態效果等。例如，使用 md:brightness-150 來僅在中型螢幕尺寸及以上套用 brightness-150 實用程式。

<div class="brightness-110 md:brightness-150">
  <!-- ... -->
</div>

如需深入了解，請查看 回應式設計、 深色模式 和 其他媒體查詢修改器 的文件。

​使用自訂值

​自訂您的主題

預設情況下，Tailwind 包含一些一般用途的 brightness 實用程式。您可以透過在 tailwind.config.js 檔案中編輯 theme.brightness 或 theme.extend.brightness 來自訂這些值。

module.exports = {
  theme: {
    extend: {
      brightness: {
        25: '.25',
        175: '1.75',
      }
    }
  }
}

在主題自訂文件中，深入了解如何自訂預設主題。

​任意值

如果您需要使用一次性的 brightness 值，而該值不適合包含在您的主題中，請使用方括號使用任意值動態產生屬性。

<div class="brightness-[1.75]">
  <!-- ... -->
</div>

在任意值文件中，深入了解任意值支援。