Linear-gradient plus image de fond semi transparente.

Bonjour,

Pour faire un effet scanner en background j'ai créé une image en .png de 2 pixels de large sur 8 pixels de haut. Les quatre pixels d'en haut sont noir et les quatre pixels d'en bas sont transparent. J'ai mis cette image en background avec un background repeat et je définis une couleur de background dans le css. La ou ça bloque c'est quand je veux styliser l'effet; en appliquant un linear-gradient à la couleur de fond, je me retrouve avec un fond blanc et seule l'image de scan continue de s'afficher. Pourtant si j'applique simplement une couleur de fond ça fonctionne.

J'ai trouvé une parade en utilisant un div, j'applique le linear-gradient au body et mon image scan.png au div mais j'aimerai comprendre pourquoi puisque cela fonctionne avec une couleur unie cela ne fonctionne pas avec linear-gradient.

Vous auriez une explication ou une astuce?

Cordialement.
Modifié par Cyberdome (07 Sep 2013 - 16:02)

Tu aurais un bout de code ?

Il n'y a aucune raison pour que ça ne fonctionne pas. La seule explication que je vois est que tu n'utilises pas correctement les background : les gradient sont des background-image, donc si par exemple tu réécris background-image (pour appeler ton png) après ton gradient, celui-ci n'apparaîtra pas puisqu'écrasé par le nouveau background-image.

Et la couleur est une propriété différente, background-color.

La solution (si c'est bien là le noeud du problème) est d'utiliser les backgrounds multiples :

background-image: url(...), linear-gradient(...);

J'espère t'avoir donné une piste !

Merci pour ta réponse, effectivement mon background-image écrasait le premier bien que le gradient fonctionnait juste avec background sans que je spécifie image. Avec le background multiple ça fonctionne. Merci de ton aide!