Comment ajouter un dégradé vertical en utilisant css?

Question

J'ai sous-menu vertical sous:.

<div id="dropdown_menu" class="menu"> 
<ul> 
<li> <a>First Link</a></li> 
<li> <a>Second Link</a></li> 
</ul> 
</div> 

Je suis en train de pièce de fond de fond en classe css « menu », tranche supérieure de fond dans .menu ul. Maintenant, j'ai un gradient vertical qui change de couleur de haut en bas (dans tout le menu vertical) et donc je ne peux pas le mettre dans .menu ul li. Est-il possible d'ajouter le gradient vertical sans faire de changement au format html?

Answer 1

#dropdown_menu { 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF280C00', endColorstr='#004A1D00'); /* for IE */ 
    background: -webkit-gradient(linear, left top, left bottom, from(#280C00), to(rgba(75, 30, 0, 0))); /* for webkit browsers */ 
    background: -moz-linear-gradient(top, #280C00, rgba(75, 30, 0, 0)); /* for firefox 3.6+ */ 
} 

Voir la mise en œuvre réelle ici: (. Les gradients autour du bord sont dégradés CSS) http://www.salonbelledesoir.com

Cela ne fonctionnera pas dans Opera (mais il peut y avoir une propriété -o-gradient que je ne sais pas .

Ou, vous pouvez utiliser des images d'arrière-plan, régulièrement répétées en conséquence.

Answer 2

personnellement, je considère l'image d'arrière-plan x répété être la meilleure solution à l'heure actuelle. Fil TERs vous donner aucune garantie de compatibilité inter-navigateur, vous feriez mieux de bâton avec les anciennes méthodes pour l'instant .. La façon d'obtenir le résultat de cette façon est:

.gradient { 
    background: #xxx url(pathtoimagedirfromcssfile/background.jpg) center top repeat-x; 
} 

où #XXX est le code couleur de fond, centre & haut sont la position de départ de l'image à répéter