web-dev-qa-db-ja.com

CSSを使用した上下のグラデーション

背景に上部と下部のグラデーションがあり、コンテナレイヤーに表示したい。問題は、コンテナdivの最後に表示する必要があるため、下部のグラデーションです。何か案は？コードと画像の写真の例を次に示します。

<style>
    .container{background: #fff url(images/bg.png) repeat-x;}
</style>

<div class="container">
    <div id="content">
        <p>Dynamic stuff goes in here that differs on every page</p>
    </div> 
</div>

http://imgur.com/XAaIx

上記のコードは上部のグラデーションのみを示していますが、この効果を達成する別の方法はありますか？

csshtmlwebsite-design
2
J Lee

次のようなものを試すことができます：

<style> 
    .container{background: #fff url(images/bg_bottom_gradient.png) repeat-x;} 
    .subcontainer{margin: 0 auto;background-image:url(images/bg_top_gradient.png);background-repeat: repeat-x;}
</style> 

<div class="container">
  <div class="subcontainer">
    <div id="content"> 
        <p>Dynamic stuff goes in here that differs on every page</p> 
    </div> 
  </div> 
</div>

新しいスタイルを追加するために編集：

4
Joel Etherton

複数の背景にcssルールを使用できます

div.container {
background-image: url(images/bg_top.png), url(images/bg_bottom.png);
background-repeat: repeat-x;
background-position: top left, bottom left;
}

うまくいくはずです。

1
Merstzik