jQuery的獲得背景漸變色

我想獲得背景色，並把它在body，例如我的背景是在FirstColor類：jQuery的獲得背景漸變色

.FirstColor{ 
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ECAA63), to(#E36D0A)); 
}

現在我想獲得的顏色#ECAA63和.FirstColor階級背景的#E36D0A和取代他們而不是body

body顏色是：

body{ 
    background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#CEEEEE), to(#98BFF1)); 
}

更換他們.FirstColor類來body爲：

＃ECAA63 - 而不是 - > #CEEEEE
＃E36D0A - 而不是 - >＃98BFF1

我試圖讓背景顏色AC：http://jsfiddle.net/rKQwu/但無法完成。

來源

2012-12-20 Taylor Gomez

在你的jsfiddle中，問題的一部分是你將MooTools設置爲你的庫，但你試圖使用jQuery選擇。切換庫使它工作，然後你解決背景字符串的問題。 – acjay

首先，爲什麼不直接切換div的類而不是直接修改樣式？

但是，如果您有需要這樣做的原因，那麼您需要從樣式值中解析from和to值。正如我在我的評論中所說的，你的代碼在你的jsfiddle中似乎很好;問題似乎是你選擇了MooTools而不是你的庫的jQuery，並且在我切換之後，它按預期工作。我不知道很多有關Webkit的標準，但在Chrome 23，十六進制值轉換爲rgb(r, g, b)風格三胞胎，所以我寫了一些代碼來解析這些出：

var bgGrad = $('.FirstColor').css("background"); 
var parseRgb = (function (rgbStr) { return rgbStr.match(/rgb\(([0-9]+), ([0-9]+), ([0-9]+)\)/); }); 
var fromStr = bgGrad.match(/from\((.*)\),/)[1]; 
var fromRgb = parseRgb(fromStr); 

var toStr = bgGrad.match(/to\((.*)\)\)/)[1]; 
var toRgb = parseRgb(toStr); 

alert('From rgb: ' + fromRgb.slice(1,4) + '\nTo rgb: ' + toRgb.slice(1, 4));

此代碼後（在jsfiddle here），fromRgb和toRgb是3個rgb值的數組。一旦提取並修改了值，如果您認爲合適，重建新的背景漸變字符串應該是微不足道的。我不知道這個代碼對於不同的情況有多強大，但在上面的Chrome版本中，對於我給出的示例，它似乎很適合我。

來源

2012-12-20 09:26:31 acjay

我也嘗試過使用它，而不是它們，但不工作。請參閱：http://jsfiddle.net/rKQwu/ –

在Chrome 23上看起來很好，但就像我所說的，我不是什麼Webkit標準的專家。這不是你所看到的嗎？ http://twitpic.com/bo0g5r – acjay

CSS background風格是幾個更具體的background-XXX屬性的組合。

-webkit-gradient實際上存儲在background-image屬性中，而不是像原始代碼中那樣存儲在background-color中。當然，它也可用於化合物background的值。

您將需要解析該字符串，如@acjohnson55的答案中所示。

請注意，至少在Chrome中，返回的字符串輸出rgb(r, g, b)語法的顏色，而不是十六進制字符串。您需要確保您寫回的顏色也包含在rgb(...)中。

請參閱http://jsfiddle.net/alnitak/xG4SW/，根據您最新的小提琴。

來源

2012-12-20 08:51:07 Alnitak

在他的小提琴中，他似乎已經在使用'.css（「background-image」）'，而不是'background-color'。 –

查看我的更新，''FirstColor：-webkit-gradient：linear'與'body：-webkit-gradient：radial'之間存在差異。演示：http://jsfiddle.net/rKQwu/ –

@Asad他更新了他的小提琴 - 它以前沒有。 – Alnitak

jQuery的獲得背景漸變色

回答

相關問題