Comment appliquer l'opacité aux variables de couleur CSS ?

Question

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

:root {
  --couleur : #f0f0f0 ;
}
≪/pré>
Je souhaite utiliser cette couleur dans main.css mais avec une certaine opacité appliquée : 
#element {
  background: (utilisez d'une manière ou d'une autre var(--color) avec une certaine opacité) ;
}
≪/pré>
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. 
            

Answer 1

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() 转换为具有所需 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);
}

<p id="element">If you can see this, your browser supports custom properties.</p>