使用javascript设置径向渐变

Question

[我正在尝试使用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)));

我收到以下错误消息：

Uncaught SyntaxError: Unexpected token ILLEGAL

所以有什么方法可以用JS设置这种效果？

Answer 1

我发现这样做的唯一方法是使用element.style=backgroundVar，并且在您的backgroundVar中将其设置为background:...

E.G

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;

Answer 2

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

要创建径向渐变，还必须定义至少两个色标。

径向渐变示例：

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9ybFJPNC5qcGcifQ==” alt =“在此处输入图像描述”>

径向渐变语法

background: radial-gradient(shape size at position, start-color, ..., last-color);
By default, shape is ellipse, size is farthest-corner, and position is center.

径向渐变-均匀间隔的色标（默认）

示例

具有均匀间隔的色标的径向渐变：

#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 */
}

Answer 3

为什么还要使用JS？

一种更好的方法是将一个类简单地添加到您的'arrCircleDivs [i] .firstChild'中，类似于.new-gradient-class。

然后在实际的CSS上，使用此类设置所需的渐变。