css - 無地の背景グラデーション

Question

私は次のことをしなければなりません: div の上部はグラデーションのイメージであり、下部では単色として続きます。シンプルなCSSでこれを行うことはできますか? 私は以下が無効であることを知っています。

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

注: 画像が塗りつぶされる最初の 225 ピクセルには、背景色を指定しないでください。

Answer 1

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

フィドル

HTML

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

CSS

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

Answer 2

私は次のことをします：

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

これにより、背景画像が div の上部に配置されます。残りの部分は、div の背景全体に選択した色になります。