使用javascript设置径向渐变

我试图用JS将径向渐变设置为div作为背景。我希望渐变在中间开始，像0.8的不透明度，当它进一步向边缘时，不透明度变为0，产生柔和的褪色效果。我尝试了一些方法，但有些根本不起作用，有些效果不如我所希望的

其中一个有效，但不是很好，是当我尝试将其应用于许多rgba定义，并将不透明度降低0.1停止：

arrCircleDivs[i].firstChild.style.backgroundImage = 
    '-webkit-radial-gradient(center,rgba('+r+','+g+','+b+',0.8),
    rgba('+r+','+g+','+b+',0.8),rgba('+r+','+g+','+b+',0.8),rgba('+r+','+g+','+b+',0.7),rgba('+r+','+g+','+b+',0.6),rgba('+r+','+g+','+b+',0.5),rgba('+r+','+g+','+b+',0.4),
    rgba('+r+','+g+','+b+',0.3),rgba('+r+','+g+','+b+',0.2),
    rgba('+r+','+g+','+b+',0.1),rgba('+r+','+g+','+b+',0))';

这些根本不起作用：

arrCircleDivs[i].firstChild.style.backgroundImage = '-webkit-radial-gradient
    (center, circle cover, rgba(30,87,153,0.7) 0%,rgba(30,87,153,0) 100%);

arrCircleDivs[i].firstChild.style.backgroundImage = '-webkit-gradient
    (radial, center center, 0px, center center, 100%, color-stop(0%,rgba(30,87,153,0.7)), 
    color-stop(100%,rgba(30,87,153,0)));

我收到以下错误消息：

未捕获的语法错误：意外标记非法

那么有没有办法用JS设置这样的效果呢？

为什么还要用JS呢

更好的方法是简单地向“arrcilledivs[i].firstChild”添加一个类，比如.new gradient类

然后在实际的CSS上，您可以使用这个类来设置所需的渐变。

为什么还要使用JS

更好的方法是简单地向“arrcilledivs[i].firstChild”添加一个类，比如.new gradient类

---

然后在实际的CSS上，您可以使用这个类来设置所需的渐变。

您可以使用CSS创建它。您需要使用所有浏览器扩展调用来确保跨平台一致性

要创建径向渐变，还必须定义至少两个颜色停止

径向梯度示例：

径向梯度语法

径向渐变-均匀间隔的颜色停止这是默认设置

范例

具有均匀间隔颜色停止点的径向渐变：

#grad {
  background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 to 6.0 */
  background: -o-radial-gradient(red, green, blue); /* For Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
  background: radial-gradient(red, green, blue); /* Standard syntax */
}

---

您可以使用CSS创建它。您需要使用所有浏览器扩展调用来确保跨平台一致性

要创建径向渐变，还必须定义至少两个颜色停止

径向梯度示例：

径向梯度语法

径向渐变-均匀间隔的颜色停止这是默认设置

范例

具有均匀间隔颜色停止点的径向渐变：

#grad {
  background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 to 6.0 */
  background: -o-radial-gradient(red, green, blue); /* For Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
  background: radial-gradient(red, green, blue); /* Standard syntax */
}

---

我发现的唯一方法是使用元素.style=backgroundVar，并在您的backgroundVar中将其设置为background:

例如

---

我发现的唯一方法是使用元素.style=backgroundVar，并在您的backgroundVar中将其设置为background:

例如

---

JavaScript不允许在引号中使用未换行的换行符。现在我的代码中有换行符，它们都写在一行中。为了方便阅读，我在这里做了一些。在第二组代码中缺少一个引号来结束这两个字符串。@rfornal是的，也是这样。第一条线当时起作用了。没有我希望的那么好，但那是另一个问题。谢谢这似乎有效。JavaScript不允许在引号内使用未换行的换行符。现在，我的代码中有换行符，它们都写在一行中。为了方便阅读，我在这里做了一些。在第二组代码中缺少一个引号来结束这两个字符串。@rfornal是的，也是这样。第一条线当时起作用了。没有我希望的那么好，但那是另一个问题。谢谢这似乎是可行的，因为Javascript允许在一些框架（比如Famo.us）中实现更简单的动画，因为我需要将它设置为几十个div，其中每个渐变都有自己的rgb值。它会随着页面刷新而改变，因为Javascript允许在一些框架中更容易地制作动画，比如Famo.us，因为我需要将它设置为几十个div，其中每个渐变都有自己的rgb值。每次页面刷新时，它都会发生变化。正如我在前一个答案中所写的那样，我需要对几十个div执行此操作，并在每次页面刷新时随机更改rgb值。正如我在前一个答案中所写的那样，我需要对几十个div执行此操作，并在每次页面刷新时随机更改rgb值。

let bg = `background:radial-gradient(circle at 0% 0%, 
                rgba(255,0,0,1), rgba(255,0,0,0) 75%), 
            radial-gradient(circle at 0% 100%, 
                rgba(0,0,255,1), rgba(0,0,255,0) 75%), 
            radial-gradient(circle at 100% 0%, 
                rgba(255,255,0,1), rgba(255,255,0,0) 75%),
            radial-gradient(circle at 100% 100%, 
                rgba(0,255,0,1), rgba(0,255,0,0) 75%);`

        document.getElementById("background").style = bg;