Question

我有一个关于CSS3 Gradients和jQuery插件的问题，称为颜色选择器，

我想要实现的是用户可以将图像的背景更改为所选的渐变;我已经尝试了许多解决方案，但似乎无法使渐变部分起作用。

以下是开发版本：http://prosperitymedia.co.uk/pm/logo.html

以下是颜色选择器：http://www.eyecon.ro/colorpicker/

请注意我只测试了FF4中的开发版本，所以我不确定它是否适用于其他浏览器。

这是我的代码：

        // initial colour value
    var gradientHexOne = '333333';
    var gradientHexTwo = '666666';




    $('#logo_gradient_1_colorSelector').ColorPicker({
        color: "#" + gradientHexOne,
        onShow: function (colpkr) {
            $(colpkr).fadeIn(500);
            return false;
        },
        onHide: function (colpkr) {
            $(colpkr).fadeOut(500);
            return false;
        },
        onChange: function (hsb, hex, rgb) {
            // every time a new colour is selected, this function is called
            gradientHexOne = hex;
            $('#logo_gradient_1_colorSelector div').css('backgroundColor', '#' + hex);

        }
    });



    $('#logo_gradient_2_colorSelector').ColorPicker({
        color: "#" + gradientHexTwo,
        onShow: function (colpkr) {
            $(colpkr).fadeIn(500);
            return false;
        },
        onHide: function (colpkr) {
            $(colpkr).fadeOut(500);
            return false;
        },
        onChange: function (hsb, hex, rgb) {
            gradientHexTwo = hex;
            $('#logo_gradient_2_colorSelector div').css('backgroundColor', '#' + hex);          

        }
    });

    $('#gradients').click(function(){   
        $('#logo').css(
            '-moz-linear-gradient(100% 100% 90deg,' + '#' + gradientHexOne + ', #' + gradientHexTwo + ')'
        );
    });

Answer 1

-moz-linear-gradient是背景图片值，例如

$('#logo').css({'background-image' : '-moz-linear-gradient(100% 100% 90deg,' + '#' + gradientHexOne + ', #' + gradientHexTwo + ')'});

jquery colorpicker和CSS3渐变

1 个答案: