如何使用 CSS 動態變亮或變暗顏色？

使用 CSS 百分比動態變亮或變暗顏色

在 Web 開發中，使用顏色自訂使用者介面至關重要。有時，您可能需要根據使用者偏好或特定條件動態調整元素的顏色。但是，如果用戶想要客製化的配色方案，靜態十六進位代碼可能會受到限制。

使用 CSS 過濾器

現代瀏覽器提供了使用 CSS 過濾器的解決方案。使用這些濾鏡，您可以透過調整元素的亮度百分比來修改元素的顏色。這允許您在不改變色調的情況下使顏色變亮或變暗。

要套用亮度濾鏡，請使用以下語法：

例如，將顏色變亮50% ，您可以使用：

要將顏色變暗15%，請使用：

以下是示範效果的範例：

在此範例中，「button」類別包含紅色。當按鈕停留在上方時，「button:hover」類別會套用 85% 的亮度濾鏡，讓紅色稍微變暗。

以上是如何使用 CSS 動態變亮或變暗顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！