グラデーショングラデーション（単色）

divの上部はグラデーションのイメージで、下部はソリッドカラーとして続きます。シンプルなCSSでこれを行うことはできますか？私は以下が無効であることを知っています。グラデーショングラデーション（単色）

{background: url(img/right_column_bg_top.png) no-repeat rgba(10,26,39,1) top 225px;

注：最初225px、画像がいっぱいに、私は次のことを行うと、背景色

出典

2013-07-29 marcias

は、私の知る限りでは、あなたはそれを正しく設定することができるように、ソリッド色のグラデーションを使用する必要があります。

CSSは次のようになります。ここでは

.imgbg { 
    width:255px; 
    height:355px; 
    background: url('http://blue2.hu/danone/nogravity/img/right_column_bg_top.png'), linear-gradient(90deg, #f7d8e8, #f7d8e8); 
    background-position: 0px 0px, 0px 112px; 
    background-repeat: no-repeat, no-repeat; 
    background-size: 255px 112px, 255px 233px; 
}

your updated fiddle

基本的な対応無し複数の背景をサポートしているブラウザの罰金する必要があり、唯一の問題はIEとなり< = 8グラデーション背景があることができていますIE9の問題ですが、動作するはずです（私はIE9をテストできません）。実際に問題が発生する場合は、colozillaを参照して修正してください。

出典

2013-07-29 17:13:32 vals

これは本当に私が探しているものです、残った2つの質問：どのようにクロスブラウザーですか？第二に、これは動的な高さdivでどのように機能していますか？これは、あなたがbackground-sizeプロパティを使用したためです。 - 私はそのプロパティを削除して、それは私のために働いた。 – marcias

私はクロスブラウザー情報を含めるように答えを編集しました。画像のサイズについては、画像のサイズは問題ではないはずではないと思いますので、グラデーションではわかりません。 – vals

せずに次のようになります。

#myDiv { background: #f7d8e8 url('/img/right_column_bg_top.png') repeat-x ; }

これはちょうどあなたの背景を配置しますdivの上部にある画像。それ以外の部分は、divの背景全体で選択した色になります。

出典

2013-07-29 12:52:34

これを試してみてください。私はクロムを使用していて、画像の下であっても、どこでも透明です。 – marcias

私はあなたの質問を理解していないかもしれませんが、画像の下に色を付けるのに間違っていますか？背景と同じ色のグラデーションの場合。私はしばらく前に作ったこのサイトをチェックしてください：[http://mychinesephrases.com]（http://mychinesephrases.com）ここで私は 'body'オブジェクトにグラデーションを入れます。 –

これを調べて、私のイメージをフィドルにしてください。これで、ピンクの色がイメージの下にあることがわかります.imgbg {width：350px;高さ：300px;背景：＃f7d8e8 url（ 'blue2.hu/danone/nogravity/img/right_column_bg_top.png'）私が欲しいのは、ピンクの色は画像の終わりの下で始まることです。 – marcias

このフィドルをチェックして、これがあなたが望むものかどうか教えてください。

FIDDLE

HTML

<div class="imgbg"></div>

CSS

.imgbg { 
    width:255px; 
    height:355px; 
    background:#f7d8e8 url('http://placehold.it/255x255') no-repeat; 
}

出典

2013-07-29 13:25:24 AnaMaria

私はまたそれのためのリンクを作成します： http://jsfiddle.net/YPcVB/1/ – marcias

グラデーショングラデーション（単色）

答えて

関連する問題