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的可变背景

2 个答案: