4 
background: -webkit-linear-gradient(#FFFFFF, #EAEAEA);
background: -o-linear-gradient(#FFFFFF, #EAEAEA);
background: -moz-linear-gradient(#FFFFFF, #EAEAEA);
background: linear-gradient(#FFFFFF, #EAEAEA);

私が基本的にやりたいことは、ある種の最小および最大のグラデーションの長さを持つことです (たとえば、背景が 500px より小さくても、グラデーションが 500px より大きくても、背景は）。私はこの方法を使ってみました：

background-size:500px;

（と組み合わせることもbackground-repeat:y-repeatできます）が、グラデーションは後で上から繰り返されるため、うまくいきません（そして、私が望むのは、要素の残りの部分で終了色を維持することです）。

すぐに、特定の高さの後にグラデーションを停止し、要素の一部のみをカバーできるようにする方法があるかどうか疑問に思っています (したがって、すべてのページで異なるサイズの要素で異なるように見えるのを防ぎます)。背景としての画像。ただし、互換性と労力の両方に関して、この方法を使用する価値があるかどうかも知りたいです。

ありがとう！

4

2 に答える 2

0

そこで、次のテスト フィドルを作成しました。a を指定するbackground-sizeと、要素のサイズに関係なく、グラデーションのサイズがそのサイズに変更されるようです ( background-sizeFirefox で適切に動作させるには、幅と高さを明示的に定義する必要があることに注意してください)。 .

http://jsfiddle.net/myajouri/y4b3Z/

これを最新の Chrome、Safari、Firefox で確認したところ、3 つのブラウザすべてで同じように見えます。

于 2013-11-03T15:04:21.913 に答える