web-dev-qa-db-fra.com

Dégradé supérieur et inférieur à l'aide de CSS

J'ai un fond qui a un dégradé haut et bas et je veux qu'il apparaisse sur un calque de conteneur. Le problème est le gradient du bas car il doit apparaître à la toute fin du conteneur div. Des idées? Voici quelques exemples de code et photo imgur:

<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

Le code ci-dessus montre uniquement le dégradé en haut, mais existe-t-il un autre moyen d'obtenir cet effet?

csshtmlwebsite-design
2
J Lee

Vous pouvez essayer quelque chose comme:

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

MODIFIE POUR AJOUTER UN NOUVEAU STYLE:

4
Joel Etherton

vous pouvez utiliser des règles CSS pour plusieurs arrière-plans

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

Cela devrait fonctionner.

1
Merstzik