修改CSS中儲存在變數中的顏色的透明度

Question

我正在嘗試改變儲存在變數中的顏色的不透明度。

:root {

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

.box{

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

我嘗試將其設為rgba以改變變數中顏色的不透明度，但它沒有起作用，有沒有其他方法可以改變變數中顏色的不透明度。

Answer 1

你可以使用自訂屬性來實作這個功能

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