Comment appliquer la transparence dans la variable de couleur CSS ?
P粉348088995
2023-08-20 18:51:07
<p>Je conçois une application en électronique pour pouvoir accéder aux variables CSS. J'ai défini une variable de couleur dans <code>vars.css</code> : </p>
<pre class="brush:css;toolbar:false;">:root {
--couleur : #f0f0f0 ;
}
≪/pré>
<p>Je souhaite utiliser cette couleur dans <code>main.css</code> mais appliquer une certaine transparence : </p>
<pre class="brush:css;toolbar:false;">#element {
background: (utilisez d'une manière ou d'une autre var(--color) et définissez une certaine transparence) ;
}
≪/pré>
<p>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. </p>
<p>Je ne peux pas utiliser <code>opacity</code> car j'utilise une image d'arrière-plan qui ne devrait pas être transparente. </p>
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 :