Javascript div的可变背景

我需要可变背景，这里有一个简单的解决方案：

---

它只使用了颜色选择器，并预先生成了png，用作重复的背景图像。问题是，当我用这个技巧在大高度的div上时，质量很差。是否可以在没有预生成png-s的情况下执行此操作？或者这是一些我可以生成更高分辨率的资源吗？

使用此JS函数为渐变生成CSS

var makeGradientStyle = function(){
    var gradientString = '\
        /* Mozilla Firefox */ \
background-image: -moz-linear-gradient(top, {colour1} 0%, {colour2} 100%);\
        /* Opera */ \
        background-image: -o-linear-gradient(top, {colour1} 0%, {colour2} 100%);\
        /* Webkit (Safari/Chrome 10) */ \
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, {colour1}), color-stop(1, {colour2}));\
        /* Webkit (Chrome 11+) */ \
        background-image: -webkit-linear-gradient(top, {colour1} 0%, {colour2} 100%);\
        /* IE10+ */\
        background: -ms-linear-gradient(top,  {colour1} 0%,{colour2} 100%);\
        /* W3C */\
        background: linear-gradient(top,  {colour1} 0%,{colour2} 100%);\
    ';

    return function(colour1, colour2){
        return gradientString.replace(/\{colour1\}/g, colour1).replace(/\{colour2\}/g, colour2)
    }
}();

现在应用它如下

var p = document.getElementById('gradient');

p.setAttribute('style', p.getAttribute('style') + '; ' + makeGradientStyle('#ff0000', '#0000ff'));

---

工作

使用此JS函数为渐变生成CSS

var makeGradientStyle = function(){
    var gradientString = '\
        /* Mozilla Firefox */ \
background-image: -moz-linear-gradient(top, {colour1} 0%, {colour2} 100%);\
        /* Opera */ \
        background-image: -o-linear-gradient(top, {colour1} 0%, {colour2} 100%);\
        /* Webkit (Safari/Chrome 10) */ \
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, {colour1}), color-stop(1, {colour2}));\
        /* Webkit (Chrome 11+) */ \
        background-image: -webkit-linear-gradient(top, {colour1} 0%, {colour2} 100%);\
        /* IE10+ */\
        background: -ms-linear-gradient(top,  {colour1} 0%,{colour2} 100%);\
        /* W3C */\
        background: linear-gradient(top,  {colour1} 0%,{colour2} 100%);\
    ';

    return function(colour1, colour2){
        return gradientString.replace(/\{colour1\}/g, colour1).replace(/\{colour2\}/g, colour2)
    }
}();

现在应用它如下

var p = document.getElementById('gradient');

p.setAttribute('style', p.getAttribute('style') + '; ' + makeGradientStyle('#ff0000', '#0000ff'));

工作

使用：

使用：

---

我想你可以跳过这些天的浏览器兼容性混乱：；-）@如果解决了你的问题，请考虑投票，并将其标记为正确答案。谢谢当然我会做的。答案给出得太快了，SF的时间限制不允许我接受。我会在几分钟内完成。我想你可以跳过这些天的浏览器兼容性混乱：；-）@如果解决了你的问题，请考虑投票，并将其标记为正确答案。谢谢当然我会做的。答案给出得太快了，SF的时间限制不允许我接受。我几分钟后就做