jQuery的顏色拾取和CSS3漸變

Question

我有一個關於CSS3漸變和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 + ')'});