フレックスdivの背景グラデーションの塗りつぶしは、CSSまたはイメージを使用していますか？

Question

グラデーションカラーでdivを塗りつぶすために固定高さ画像を使用しています： background：transparent url（green_bg.gif）repeat-x scroll 0 0;

ただし、高さは画像の高さに等しいだけです。高さの変化するdivのbackroundを埋め込むための最良の方法は、画像を使用するかCSSを使用するかのいずれかで、その内部のテキストの量に応じていますか？

Answer 1

あなたが探しているのは、背景画像（グラデーション）で塗りつぶされたdivと、次にソリッドカラーで残りの部分です。

もしそうなら、Photoshop（または選択した画像エディタ）で、グラデーションの最後のピクセルの16進数を取得します。議論のために、＃FF0000としましょう。そして、次の操作を行います。

.myDiv { 
    background: #FF0000 url(green_bg.gif) repeat-x 0 0; 
} 

これは＃1 FF0000（赤）を使用して背景を塗りつぶしますし、あなたのdivの先頭から（x軸）水平に繰り返し、その上にあなたの背景画像を重ねます。赤い背景を表示する方法は、div内のコンテンツの量を増やすことです。

また、グラデーションの特定の部分が常に表示されるようにするには、CSSのpadding-topを増やすことができます。

.myDiv { 
    background: #FF0000 url(green_bg.gif) repeat-x 0 0; 
    padding-top: 20px; 
} 

これはあなたが得意でない場合は、あなたの質問で明確にしてください。

Answer 2

私は背景SVGと言います。しかしafaik彼らはサファリatmでのみサポートされています。

またはおそらくwebkitにはグラデーションを行うプロパティがあります。あなたが本当にそれを必要とするなら、キャンバス。