Modify transparency of color stored in variable in CSS

Question

I'm trying to change the opacity of a color stored in a variable.

:root {

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

.box{

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

I tried setting it to rgba to change the opacity of the color in the variable but it didn't work, is there any other way to change the opacity of the color in the variable.

Answer 1

You can use custom attributes to achieve this function

: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>