Comment appliquer l'opacité aux variables de couleur CSS ?
P粉495955986
2023-08-24 00:12:47
<p>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 : </p>
<pre class="brush:css;toolbar:false;">:root {
--couleur : #f0f0f0 ;
}
≪/pré>
<p>Je souhaite utiliser cette couleur dans <code>main.css</code> mais avec une certaine opacité appliquée : </p>
<pre class="brush:css;toolbar:false;">#element {
background: (utilisez d'une manière ou d'une autre var(--color) avec une certaine opacité) ;
}
≪/pré>
<p>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. </p>
<p>Je ne peux pas utiliser <code>opacity</code> car l'image d'arrière-plan que j'utilise ne doit pas être transparente. </p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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); }