Modifier la transparence de la couleur stockée dans la variable en CSS

Question

J'essaie de changer l'opacité d'une couleur stockée dans une variable.

:root {

--main-theme-color: rgb(123, 40, 231);
}

.box{

background-color: rgba(var(--message-box-transparency),0.5);
}

J'ai essayé de le régler sur rgba pour changer l'opacité de la couleur dans la variable mais cela n'a pas fonctionné, existe-t-il un autre moyen de changer l'opacité de la couleur dans la variable.

Answer 1

Vous pouvez utiliser des attributs personnalisés pour réaliser cette fonction

:root {
  /* #f0f0f0 的十进制 RGB 值 */
  --color: 123, 40, 231;
}
body {
  background-color: rgb(var(--color));
}

.box{
  background-color: rgba(var(--color), 0.5);
}

:root {
  /* #f0f0f0 的十进制 RGB 值 */
  --color: 123, 40, 231;
}
body {
  background-color: rgb(var(--color));
}
section{
  width:200px;
  height:200px;
  background:red;
  display:flex;
  align-items:center;
  justify-content:center;
}
div {
  width:150px;
  height:150px;
  border:1px solid #000;
  background-color: rgba(var(--color), 0.5);
}

<section>
 <div>
 
 </div>
</section>