Maison > Questions et réponses > le corps du texte
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粉0685109912023-10-14 13:50:26
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); }
If you can see this, your browser supports custom properties.