首頁  >  問答  >  主體

如何在CSS顏色變數上套用不透明度?

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

:root {
  --color: #f0f0f0;
}

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

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

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

我無法使用 opacity 因為我使用的背景圖像不應該是透明的。

P粉496886646P粉496886646392 天前702

全部回覆(1)我來回復

  • P粉068510991

    P粉0685109912023-10-14 13:50:26

    您不能採用現有顏色值並對其套用 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.

    回覆
    0
  • 取消回覆