具有css变量和hsla的线性渐变[重复]答案

【问题标题】：Linear gradient with css variable and hsla [duplicate]具有css变量和hsla的线性渐变[重复]
【发布时间】：2020-01-28 22:29:00
【问题描述】：

我有一个css变量：

:root{
 --red: hsl(0, 100%, 74%);
}

然后这不起作用：

.page-wrapper{
  background-image: linear-gradient(hsla(var(--red),.6), hsla(var(--red),.6)), url(./images/bg-intro-desktop.png);
}               /**** This does not work for some reason****/

如果我将 var(--red) 替换为有效值：

.page-wrapper{
  background-image: linear-gradient(hsla(0, 100%, 74%,.6), hsla(0, 100%, 74%,.6)), url(./images/bg-intro-desktop.png);
}   /**** This works well ****/

我无法找到此问题的答案，感谢您的帮助！

【问题讨论】：

试试--red: 0, 100%, 74%;
@TemaniAfif 哦，它有效，谢谢

标签： html css

【解决方案1】：

注意语法。（见https://codepen.io/baadaa/pen/XWJwXaZ）

// DO THIS
:root {
  --red: 0, 100%, 74%;
}

【讨论】：