javascript - 使用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)));

我收到以下错误信息:

未捕获的语法错误:意外的 token 非法

那么有没有办法用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;