亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

communauté

Apprendre

Bibliothèque d'outils

Outils d'IA

Loisirs

Fran?ais

Comment appliquer l'opacité sur la variable de couleur CSS??

P粉496886646 2023-10-13 14:43:49

862

Je con?ois une application à l'aide d'Electron pour pouvoir accéder aux variables CSS. J'ai défini une variable de couleur dans vars.css?:?

:root {
  --color: #f0f0f0;
}

Je souhaite utiliser cette couleur dans main.css mais avec une certaine opacité appliquée?:

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

Comment faire ? Je n'utilise aucun préprocesseur, juste du CSS. Je préférerais une réponse entièrement CSS, mais j'accepterai JavaScript/jQuery.

Je ne peux pas utiliser opacity car l'image d'arrière-plan que j'utilise ne doit pas être transparente.

P粉496886646

répondre à tous(1)

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

Vous ne pouvez pas prendre une valeur de couleur existante et lui appliquer un canal alpha. Autrement dit, vous ne pouvez pas prendre une valeur hexadécimale existante (telle que #f0f0f0), lui attribuer un composant alpha et utiliser la valeur résultante avec une autre propriété.

Cependant, la propriété personnalisée vous permet de convertir des valeurs hexadécimales en triples RVB à utiliser avec la fonction rgba() 一起使用，將該值存儲在自定義屬性中（包括逗號！），使用將 var() 轉(zhuǎn)換為具有所需 alpha 值的 rgba() et cela fonctionnera très bien :

: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.