Ändern Sie die Transparenz der in einer Variablen in CSS gespeicherten Farbe

Question

Ich versuche, die Deckkraft einer in einer Variablen gespeicherten Farbe zu ändern.

:root {

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

.box{

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

Ich habe versucht, es auf RGBA zu setzen, um die Deckkraft der Farbe in der Variablen zu ändern, aber es hat nicht funktioniert. Gibt es eine andere Möglichkeit, die Deckkraft der Farbe in der Variablen zu ändern?

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>