Ubah suai ketelusan warna yang disimpan dalam pembolehubah dalam CSS

Question

Saya cuba menukar kelegapan warna yang disimpan dalam pembolehubah.

:root {

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

.box{

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

Saya cuba menetapkannya kepada rgba untuk menukar kelegapan warna dalam pembolehubah tetapi ia tidak berfungsi, adakah terdapat cara lain untuk menukar kelegapan warna dalam pembolehubah.

Answer 1

Anda boleh menggunakan atribut tersuai untuk mencapai fungsi ini

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