如何將不透明度套用至 CSS 顏色變數?
P粉495955986
P粉495955986 2023-08-24 00:12:47
0
1
419

我正在使用 Electron 設計一個應用程序,因此我可以訪問 CSS 變數。我在 vars.css 中定義了一個顏色變數:

:root { --color: #f0f0f0; } 

我想在 main.css 中使用這個顏色,但應用了一些不透明度:

#element { background: (somehow use var(--color) at some opacity); } 

我該如何做?我沒有使用任何預處理器,只使用CSS。我比較喜歡全 CSS 答案,但我會接受 JavaScript/jQuery。

我無法使用不透明度,因為我使用的背景圖片不應該是透明的。

P粉495955986
P粉495955986

全部回覆 (1)
P粉715274052

您不能採用現有顏色值並對其套用 Alpha 通道。也就是說,您不能採用現有的十六進位值(例如#f0f0f0),為其提供 alpha 分量並將結果值與另一個屬性一起使用。

但是,自訂屬性可讓您將十六進位值轉換為RGB 三元組以與rgba()一起使用,將該值儲存在自訂屬性中(包括逗號!) ,使用將var()轉換為具有所需alpha 值的rgba()函數,它就會正常工作:

:root { /* #f0f0f0 in decimal RGB */ --color: 240, 240, 240; } body { color: #000; background-color: #000; } #element { background-color: rgba(var(--color), 0.8); }

If you can see this, your browser supports custom properties.

    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!