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.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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); }