イメージの後にCSS gratientを作成する

Question

イメージ上にCSSグラデーションを使用するカラーピッカーを構築しています。私はHSBの色選択のために働くCSSのグラデーションを持っていますが、私はHSB色の選択のためのCSSグラデーションを作成することができません。元のグラデーションは次の場所にあります。 http://jsfiddle.net/qVsFN/

グラデーション1はCSS 2で表示する必要がありますか？私は運がない放射状の勾配を含むいくつかの事を試しました。ここで

は、私が使用していCSSとマークアップです：

#red_grad { 
    background: -moz-linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 0, 0, 1)) repeat scroll 0 0 transparent; 
    background: -webkit-gradient(linear, left center, right center, from(rgba(255, 255, 255, 1)), to(rgba(255, 0, 0, 1))); 
    height: 262px; 
    width: 262px; 
} 
#black_grad { 
    background: -moz-linear-gradient(90deg, rgba(0, 0, 0, 1), transparent) repeat scroll 0 0 transparent; 
    background: -webkit-gradient(linear, center bottom, center top, from(rgba(0, 0, 0, 1)), to(transparent)) repeat scroll 0 0 transparent; 
    height: 262px; 
    width: 262px; 
} 

<div id="red_grad"> 
    <div id="black_grad"> 
    </div> 
</div> 

あなたはそれがHSL彩度・明度面が2つの線形勾配で行うことができhttp://jsfiddle.net/qVsFN/

Answer 1

に住んで見ることができます：

1. 明るさ：白から透明〜黒（水平グラデーション）
2. 彩度：完全に飽和した色から灰色http://jsfiddle.net/leaverou/qVsFN/3/

   注：（＃808080）（vertial勾配）

は、ここでそれとフィドルだあなたが最初のもので間違って持って、あなたはあなたが思っていることである混同何

• グラデーションごとに2つのカラーストップに制限されています。ご覧のとおり、それ以上の柔軟性があります:)
• Lightnessグラデーションでは3の代わりに4つのカラーが停止するのはなぜですか？ transparentは実際にはrgba（0,0,0,0）にマップされるので、透明から白へのグラデーションは期待通りではありません。
• CSS3に2つの要素は必要ありません。ただ1つの画像に複数の背景を持つことができるので、余分な要素を削除しました。 ;）

色合いを変更するのはどうですか？新しい色（Hue = whatever、sat = 100、lightness = 50）の完全に飽和したバージョンの代わりにredを置き換えて、あなたのカラーピッカーがあります！