CSSのグラデーションの色はピクセル単位で終了します

Question

私は、アプリケーションが固定サイズで、要素がデザインに基づいて正確に配置されなければならないHTML/CSS/JSプロジェクトに取り組んでいます。ウィンドウのサイズは固定されているので、CSSのピクセルサイズで簡単に作業でき、ブラウザのサイズを変更する心配もありません。私はまた、IEやOperaについて心配しない贅沢さを持っています：アプリはWebkitとFirefoxでのみ動作する必要があります。

いくつかの箇所では、特定のピクセル数を超えるグラデーションの背景が必要です。これは、簡単に

background-image: linear-gradient(to top, #666666, #000000 60px); 

ようなもので達成されるだろう（とその-webkit-と-moz-対応。）これは、ほとんどの要素のためのトリックを行います。しかし、私は色の停止のために上下のピクセル位置を持つ必要があるカップルがあります。 （最後の10％を超えてグレーに黒そして、その後、透明と60PX上で灰色から黒へ）

background-image: linear-gradient(to top, #666666, black 60px, transparent 60px, transparent 90%, black 90%, #666666); 

：これらは、％ポイントだった場合、それはのようなものを行うことができます。しかし、問題の要素は異なる時にサイズが異なるため、ピクセルで同じことを達成する必要があります。私は、JSを使用して、必要に応じて異なる動的に計算されたパーセンテージポイントでグラデーションを再適用する必要がないようにしたいと思います。

だから、私の質問：端からXピクセル（ない割合）を停止する色を指定する方法はありますか？

Answer 1

私はこれが可能であるとは思いませんが、2つのオブジェクト、下部と上部からのピクセルを持つ他の不透明なピクセルとの1を重ね、まだJS

に、前の行で

.background { 
    position: absolute; 
    background-image: linear-gradient(to top, #666666, black 60px, transparent 60px); 
} 
.overlay { 
    position: relative; 
    background-image: linear-gradient(to bottom, #666666, black 60px, transparent 60px); 
} 

Answer 2

を使用して避けるだろうpo228からの回答ですが、同じ要素の背景にあります。

セット2つの異なる勾配、私はちょうど検索エンジンを経由して、この上に来た一番下

.test { 
 
    background: linear-gradient(to top, red 10px, white 10px), 
 
     linear-gradient(to bottom, blue 10px, white 10px); 
 
    background-size: 100% 50%; 
 
    background-repeat: no-repeat; 
 
    background-position: bottom center, top center; 
 
    height: 150px; 
 
    width: 300px; 
 
}

<div class="test"></div>

Answer 3

から上から順に1、その他、私は最善の解決策がすでにヴァルスによって与えられたと思います複数の背景画像を使用していますが、background-sizeとbackground-positionの代わりに、より柔軟で安定していると思いますアルファの色ここではrgba()）は、以下の例のように：

background-image: 
    /* top gradient - pixels fixed */ 
    linear-gradient(to bottom, rgb(128,128,128) 0px,rgba(128,128,128,0) 16px), 
    /* bottom gradient - pixels fixed */ 
    linear-gradient(to top, rgb(128,128,128) 0px, rgba(128,128,128,0) 16px), 
    /* background gradient - relative */ 
    linear-gradient(to bottom, #eee 0%, #ccc 100%) ; 

これは私が最初に探していた正確に動作を提供します。 :)

デモ：http://codepen.io/Grilly86/pen/LVBxgQ