5

私は背景色を取得してそれを入れたいです body、例えば私の背景はクラスのようFirstColorです：

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

今、私はクラスで色#ECAA63と#E36D0A背景を取得.FirstColorし、代わりに色を置き換えたい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/しかし、できません。

4

2 に答える 2

1

CSSbackgroundスタイルは、いくつかのより具体的なbackground-XXX属性を組み合わせたものです。

-webkit-gradientは実際にはbackground-image属性に格納されbackground-colorており、元のコードのようには格納されていません。もちろん、複合background値でも利用できます。

@ acjohnson55の回答に示されているように、その文字列を解析する必要があります。

少なくともChromeでは、返される文字列rgb(r, g, b)は16進文字列としてではなく、構文で色を出力することに注意してください。書き戻す色もでラップされていることを確認する必要がありますrgb(...)。

最新のフィドルに基づいて、http：//jsfiddle.net/alnitak/xG4SW/を参照してください。

于 2012-12-20T08:51:07.030 に答える
1

まず、スタイルを直接変更するのではなく、divのクラスを切り替えてみませんか？

ただし、それを行う必要がある理由がある場合は、スタイル値からfromとの値を解析する必要があります。to私のコメントで言ったように、あなたのコードはあなたのjsfiddleでうまくいくようです。問題は、ライブラリにjQueryではなくMooToolsを選択したことであるように見えます。これを切り替えた後、期待どおりに機能しました。Webkit標準についてはよくわかりませんが、Chrome 23では、16進値が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));
​

このコードの後（ここfromRgbではjsfiddle内）、toRgb3つのrgb値の配列です。値が抽出され、適切と思われるように変更されたら、新しい背景グラデーション文字列を再構築するのは簡単です。このコードがさまざまなケースに対してどれほど堅牢であるかを知るのに十分なことはわかりませんが、上記のChromeバージョンでは、あなたが示した例では問題なく機能しているようです。

于 2012-12-20T09:26:31.597 に答える