it-swarm.com.de

Oberer und unterer Farbverlauf mit CSS

Ich habe einen Hintergrund mit einem oberen und unteren Farbverlauf und möchte, dass er auf einer Containerebene angezeigt wird. Das Problem ist der untere Gradient, da er ganz am Ende des Containers div stehen muss. Irgendwelche Ideen? Hier ist ein Beispielcode und ein Bild:

<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

Der obige Code zeigt nur den Farbverlauf oben an. Gibt es eine andere Möglichkeit, diesen Effekt zu erzielen?

2
J Lee

Sie könnten versuchen, etwas wie:

<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> 

EDITIERT UM NEUEN STIL HINZUFÜGEN:

4
Joel Etherton

sie können CSS-Regeln für mehrere Hintergründe verwenden

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

Das sollte funktionieren.

1
Merstzik