修改CSS中存储在变量中的颜色的透明度-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

修改CSS中存储在变量中的颜色的透明度

P粉920835423 2023-09-09 09:39:47

[CSS3讨论组]

905

我正在尝试改变存储在变量中的颜色的不透明度。

:root {

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

.box{

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

我尝试将其设置为rgba以改变变量中颜色的不透明度，但它没有起作用，有没有其他方法可以改变变量中颜色的不透明度。

P粉920835423

全部回复(1)

P粉7175959852023-09-10 00:10:40 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);
}