如何使用 CSS 動態調整顏色的亮度？

使用CSS 濾鏡進行動態色彩操作

問題：

問題：

問題：

.button {
  color: #ff0000;
}

/* note: 100% is baseline so 85% is slightly darker, 
   20% would be significantly darker */
.button:hover {
  filter: brightness(85%);
}

問題：

問題：我們如何動態地變亮或變亮使用CSS 使指定顏色變暗？我們可以按百分比減少顏色嗎？ 答案：是的，可以使用 CSS 濾鏡以百分比減少顏色。操作方法如下：在此範例中，按鈕的基底色設定為紅色 (#ff0000)。透過對懸停時的按鈕套用濾鏡，亮度會降低 15%，從而產生較暗的紅色陰影。可以調整百分比以達到所需的亮度或暗度等級。 這種方法與所有現代瀏覽器相容，這一點從 caniuse 相容性表中的廣泛可用性中可以看出。

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