灰階

​基本用法

​讓元素變為灰階

使用 grayscale 和 grayscale-0 工具程式來控制元素應呈現為灰階還是全彩。

grayscale-0

灰階

<div class="grayscale-0 ...">
  <!-- ... -->
</div>
<div class="grayscale ...">
  <!-- ... -->
</div>

​移除濾鏡

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

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

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

​有條件地套用

​滑鼠懸停、焦點和其他狀態

Tailwind 讓您可以在不同的狀態下使用變異修飾符條件式套用實用程式類別。例如，使用 hover:grayscale-0 僅在滑鼠懸停時套用 grayscale-0 實用程式。

<div class="grayscale hover:grayscale-0">
  <!-- ... -->
</div>

如需所有可用狀態修飾符的完整清單，請查看 滑鼠懸停、焦點和其他狀態 文件。

​斷點和媒體查詢

您也可以使用變異修飾符來鎖定媒體查詢，例如回應式斷點、暗色模式、偏好減少動作等。例如，使用 md:grayscale-0 僅在中型螢幕大小及以上套用 grayscale-0 實用程式。

<div class="grayscale md:grayscale-0">
  <!-- ... -->
</div>

如需進一步了解，請查看關於 回應式設計、 暗色模式 和 其他媒體查詢修飾符 的文件。

​使用自訂數值

​自訂您的主題

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

module.exports = {
  theme: {
    extend: {
      grayscale: {
        50: '50%',
      }
    }
  }
}

在 主題自訂 文件中進一步了解如何自訂預設主題。

​任意數值

如果您需要使用一次性的 grayscale 數值，而將其包含在您的主題中沒有意義，請使用方括號使用任意數值來動態產生一個屬性。

<div class="grayscale-[50%]">
  <!-- ... -->
</div>

在 任意數值 文件中進一步了解任意數值支援。