CSS3のグラデーション（パーセンテージではなくピクセル単位）

Question

固定幅のヘッダー、サブヘッダー、およびコンテンツdivに対応するために、ブラウザウィンドウのサイズにかかわらず同じサイズの線形グラデーションの背景を作成したい。

私の問題は、ページを移動したときにグラデーションの縮尺を変えたくないということです。私は同じ結果を得るために1ピクセルのワイド画像を使用することができますが、私は最終的にサイトができるだけイメージフリーでロゴがないことを望んでいます。

パーセント定義のグラデーションの代わりにピクセル定義のグラデーションを使用することはできますか？

Answer 1

はいできます。パーセンテージの代わりに標準単位を使用することができます。この例を参照してください：

http://dabblet.com/gist/1856111

background: linear-gradient(left, #729fcf 10px, #4c7bb4 20px, #3465a4 63%, #204a87 100%); 

更新

をあなたは上記の例を使用するためには、ブラウザのプレフィックスを含める必要があります。

background-image: -webkit-linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%); 
background-image: -moz-linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%); 
background-image: -o-linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%); 
background-image: -ms-linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%); 
background-image: linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%); 

Answer 2

あなたは、固定サイズの勾配を持って、そのサイズを指定するには、background-sizeプロパティを使用する場合は、次のように彼らは、指定されます。