[Résolu] [CSS3] Superposition d'image sur fond dégradé

Bonjour,

Je me fais les premières mains en CSS3...

Je cherche à combiner deux éléments en fond. L'un utilise un dégradé linéaire sans image, l'autre est un curseur gif à placer centré au bas du div, sans être répété :

(l'aperçu a un peu buggé, mais ça apparaît correctement en cliquant dessus)

Je teste ça sous FF et Chrome.

1ère option : appliquer un background avec le gif après avoir appliqué le dégradé : le dégradé n'est plus pris en compte.

Seconde option : utiliser border-image pour le gif, en ne l'appliquant qu'à la bordure basse, en tentant de centrer l'image de référence sans répétition. Je n'ai pas réussi, la syntaxe n'étant pas évidente...

Et vous, quelle méthode auriez-vous utiliser ?

Merci beaucoup !
Modifié par yakou32 (11 Nov 2010 - 16:26)

En gros, sur le principe:

a {
  position:relative;
  display:block;
  width:200px;
  height:50px;
  text-align:center;
  background:-webkit-gradient(
   linear,
   0 0, 0 100%,
   from(#eee), to(#ccc)
  );
  background:-moz-linear-gradient(
   #eee, #ccc
  );
}
a:after {
  content:url(arrow.png);
  position:absolute;
  left:50%;
  top:30px; /* Hauteur du bloc moins hauteur de l'image */
  margin-left:-10px; /* Moitié de la largeur de l'image */
}

Modifié par Benjamin D.C. (11 Nov 2010 - 14:29)

Hello,

Ça devrait être jouable avec des background multiples également.
(Mais la solution de Benjamin devient du CSS 2.1 compatible IE8 si tu utilises une image de fond pour le dégradé plutôt qu'un dégradé CSS. Les background multiples seraient au mieux compatibles IE9.)
Modifié par Florent V. (11 Nov 2010 - 14:40)

OK, super, ça fonctionne nickel.

Bon, en plus, j'en apprends sur la pseudo classe after, et sur content

Merci à tous les deux !