【问题标题】:linear-gradient color modify线性渐变颜色修改
【发布时间】:2016-08-18 11:19:44
【问题描述】:

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

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

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

【问题讨论】:

  • 在 css 文件中尝试 !important
  • 你能澄清一下你想要什么吗,我不太明白你想要什么,听起来像一个特异性或订单问题
  • 寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Complete, and Verifiable example
  • 如果 bg 来自 javascript,您不会通过更改 css 获得任何结果,因为 javascript 在应用 css 规则之后运行(在大多数情况下)。您必须编写另一个 javascript 代码才能再次更改百分比。
  • linear-gradient 是内联样式,因为 javascript 在我需要时会修改。但我需要改变颜色。

标签: css linear-gradients


【解决方案1】:

我假设您正在尝试通过 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%)";

地点:

-- 第一个值(第一种颜色),将从 0% 到 value1

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

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

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

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

希望对你有帮助...

注意:使用 rgba(255,255,255,1)(白色)模拟进度条,color 表示百分比,white 表示未完成。

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

【讨论】:

  • 我创建了一个例子。 jsfiddle.net/u36v7b56/4 谢谢你的帮助,但是内联颜色是默认值。
  • 你呢?你什么意思?在哪里?
  • 不客气。那你现在需要什么? :)。名为 you_var_color 的 var 设置了您想要的第一种颜色...
  • 我想保留默认颜色值,但我想提供一个从 css 修改的机会。
  • 已编辑...@Developer
猜你喜欢
  • 2016-05-31
  • 1970-01-01
  • 2014-10-26
  • 2020-10-13
  • 2021-11-18
  • 2015-06-05
  • 1970-01-01
  • 1970-01-01
  • 2014-08-12
相关资源
最近更新 更多