Dégradé sur une image avec linear-gradient

Bonjour,

Alors voilà, trouver de l'aide pour faire des dégradés sans image sur google est facile, mais je ne trouve rien pour faire un dégradé sur une image... Mon but est en effet de faire une image dont le bas disparaît dans la couleur de fond de la page.

J'ai trouvé une vague piste sur un forum d'un gars qui faisait un truc du genre :

Code:

---

background: url(./img/img45.gif) 100% 0% no-repeat, -moz-linear-gradient(#063, rgba(255, 255, 255, 1)) 0 0 no-repeat;

---

sans résultat, et sans réponse à son problème.

Quelqu'un pourrait donc m'indiquer la bonne méthode pour arriver au résultat escompté ?

En vous remerciant !

Il me semble que la meilleure solution (et compatible sur tous les navigateurs) serait plutôt d'utiliser ton éditeur d'images favori et de créer directement l'image avec le dégradé...

Non, les images sont dynamiques, c'est pour une galerie...

Alors certes, un script coté serveur pourrait remplir cette fonction, mais je tiens absolument à déporter la charge de calcul vers le client.

J'ai bien des solution "bricolages", genre avec un PNG transparent à coller sur une image de fond, mais si je pouvais régler mon problème directement avec du CSS... Ce n'est pas possible ?

Ça semble possible avec une syntaxe plus détaillée.

Bonjour,

Citation:

---

Envoyé par comode

Code:

---

background: url(./img/img45.gif) 100% 0% no-repeat, -moz-linear-gradient(#063, rgba(255, 255, 255, 1)) 0 0 no-repeat;

---

---

Il n'y a aucune transparence de définie dans ton dégradé puisque la valeur alpha est à 1. Ensuite, vu que ton image est déclarée en premier, elle vient par dessus ton ton dégradé.

Pour un dégradé du bas de l'image vers le blanc essaie:

Code:

---

background:-moz-linear-gradient(rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1)) 0 0 no-repeat, url(./img/img45.gif) 100% 0% no-repeat;

---