如何在CSS中以百分比動態調整顏色亮度？

使用 CSS 百分比進行動態色彩調整

以百分比調整顏色的亮度或亮度是 CSS 客製化和個人化中的常見任務。在現代瀏覽器中，可以使用 CSS 過濾器有效地實現這一點。

以百分比減少 CSS 顏色

提供的 CSS 程式碼片段嘗試透過分配一個顏色屬性或藍色的負百分比。然而CSS不支援這樣的操作。相反，CSS 濾鏡可用於動態修改顏色亮度。

使用濾鏡調整顏色亮度

CSS 濾鏡屬性可讓您對元素套用預先定義的轉換，包括顏色處理。若要將顏色減少一定百分比，您可以使用 Brightness() 濾鏡。以下程式碼示範如何將「按鈕」元素的顏色加深 15%：

.button {
  color: #ff0000;
}

.button:hover {
  filter: brightness(85%);
}

在此範例中，brightness() 濾鏡套用於懸停時的按鈕元素。 85% 的值會降低顏色的亮度，使其變暗。請注意，100% 代表基線亮度，低於 100% 的值會產生較暗的顏色，而高於 100% 的值會產生較亮的顏色。

透過使用此方法，您可以透過指定百分比來動態調整元素的顏色，讓您可以更好地控制 Web 應用程式中的顏色個人化和自訂。

以上是如何在CSS中以百分比動態調整顏色亮度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！