线性渐变颜色修改

时间:2016-08-18 11:19:45

标签: css linear-gradients

如何使用另一个css文件修改线性渐变颜色?

背景:线性渐变(0度,蓝色12%,透明12%);

有可能吗?我无法修改百分比,因为它来自javascript。

1 个答案:

答案 0 :(得分:0)

我想你正试图通过CSS做一个进度条。我为你的目的编码这句话。

如果您需要更改渐变的颜色或百分比,只需通过javascript调用它们:可能有点:

var your_var_color1 = document.getElementById("color").value;    
document.getElementById("your_element").style.background = "linear-gradient(to right, " + your_var_color1 + " 0%, " + your_var_color1 + " " + (value1 – 20) + "%, rgba(255,255,255,1) " + value1 + "%, rgba(255,255,255,1) 100%)";

其中:

- 第1个值(第1色),从0%到value1

- 2º值 - 当第一个颜色的渐变开始时((value1 - 20)到value1)

- 3º值 - 当2º颜色开始时(值1)

- 4º值 - 当2种颜色完成时......(在这种情况下为100%)

我没有在2º和3º值之间设置值,当第一次颜色完成和第二次启动时,这意味着将自动设置来自其他值......

希望它对你有所帮助......

注意:使用rgba(255,255,255,1)(白色)模拟进度条,其中颜色为百分比,白色未完成。

编辑:您可以通过背面设置颜色(从服务器传递值)或通过前面设置它(我想你正在寻找这个)。只需创建一个<input type=text.../>,其中用户会使用预定义的颜色引入颜色(您应该检查错误)或组合框,并在您的js中获取其值。简短的例子补充道。