首頁 > web前端 > css教學 > 如何使用 CSS 動態調整顏色的亮度?

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

DDD
發布: 2024-12-07 05:18:14
原創
691 人瀏覽過

How can I dynamically adjust the brightness of a color using 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板