Comment appliquer la transparence dans la variable de couleur CSS ?

Question

Je conçois une application en électronique pour 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 appliquer une certaine transparence : 
#element {
  background: (utilisez d'une manière ou d'une autre var(--color) et définissez une certaine transparence) ;
}
≪/pré>
Comment puis-je procéder ? Je n'utilise aucun préprocesseur, juste du CSS. Je préférerais une réponse CSS pure, mais je suis également ouvert aux solutions JavaScript/jQuery. 
Je ne peux pas utiliser opacity car j'utilise une image d'arrière-plan qui ne devrait pas être transparente. 

Answer 1

Vous ne pouvez pas appliquer un canal alpha aux valeurs de couleur existantes. Autrement dit, vous ne pouvez pas ajouter un composant alpha à une valeur hexadécimale existante (par exemple #f0f0f0) et utiliser la valeur résultante avec un autre attribut.

Cependant, la propriété personnalisée vous permet de convertir la valeur hexadécimale en triplet RVB à utiliser avec la fonction rgba()一起使用，将该值存储在自定义属性中（包括逗号！），使用var()将该值替换为具有所需alpha值的rgba() et cela fonctionnera correctement :

:root {
  /* #f0f0f0转换为十进制RGB */
  --color: 240, 240, 240;
}

body {
  color: #000;
  background-color: #000;
}

#element {
  background-color: rgba(var(--color), 0.8);
}

<p id="element">如果您能看到这个，说明您的浏览器支持自定义属性。</p>