使用CSS变量与rgba的梯度透明度

有没有办法使用透明度指定渐变颜色时使用CSS变量，例如：使用CSS变量与rgba的梯度透明度

:root { 
    --accent-color: #dfd0a5; 
} 

h1{ 
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(red(var(--accent-color)), green(var(--accent-color)), blue(var(--accent-color)), 1)); 
}

来源

2015-04-12 Manish

纯CSS没有变量。 – j08691

@ j08691检查：https：//developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables –

你不能用纯CSS做到这一点，但它可以用CSS预处理器 - 对于SASS/SCSS你可以简单地使用'rgba：（＃dfd0a5，1）'。 – Terry

您可以使用变量，但不能从CSS中的单个十六进制值对单个红色，绿色和蓝色组件进行采样。

如果你想使用变量与rgba()，你需要为每个颜色成分为十进制值的变量，并且rgba()函数中引用的每个变量，像这样：

:root { 
    --accent-red: 223; 
    --accent-green: 208; 
    --accent-blue: 165; 
} 

h1 { 
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(var(--accent-red), var(--accent-green), var(--accent-blue), 1)); 
}

另外，您可以指定整个rgba()值作为单个变量，但您需要在此情况下包含alpha：

:root { 
    --accent-color: rgba(223, 208, 165, 1); 
} 

h1 { 
    background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--accent-color)); 
}

来源

2015-04-12 16:11:11 BoltClock

我假设浏览器支持在这里不是问题，但如果有人想知道，[只有Firefox在此刻实现级联变量]（http://caniuse.com/#feat=css-variables）。 – BoltClock

我怀疑这是否可能。您可以替换整个颜色值，但是要从可变组件中合成颜色，您需要类似'calc（）'但是在颜色空间中。 –

@ c-smile：只要值替换产生一个有效的声明，就不会限制样式声明var（）中某个值的哪个部分可以出现（请参见http：// www .w3.org/TR/CSS-变量-1 /＃使用变量）。当然，[它只适用于当前的实现]（http://jsfiddle.net/BoltClock/f5drrLph）。 – BoltClock

使用CSS变量与rgba的梯度透明度

回答

相关问题