div 的可变背景

Question

我需要多变的背景，这里是简单的解决方案：http://jsfiddle.net/mondayguy/nehcvh8x/

var color1='009687', color2='191C26'

function updateGradient() {
    document.getElementById('gradient').style.background =
        "url('http://jscolor.com/gradient/x"+color1.toUpperCase()+"-378-"+color2.toUpperCase()+".png?tmp') center top repeat-x"
}

它只使用 colorPicker 并预生成了用作重复背景图像的 png。问题是，当我将此技巧用于 div 的高度较大时，质量很差。没有预生成的 png-s 是否可以做到这一点？或者是一些我可以生成更高分辨率的资源？

Answer 1

使用这个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'));

工作Fiddle

Answer 2

使用CSS linear gradients:

#gradient
{
    background: linear-gradient(to top, #009687, #191C26);
}

div 的可变背景

Changeable background for div

javascript

css

background-image