css 3 images en td

Question

J'ai du mal à ajouter 3 images à une cellule de table en CSS et je me demandais si quelqu'un pouvait m'aider à comprendre ce que je fais mal. Voici ce que j'ai:

css

.Example { 
     background-image:url("image1.gif"),url("image2.gif"),url("image3.gif"); 
    background-position: top left, top center, top right; 
    background-repeat: no-repeat, repeat-x, no-repeat; 
} 

html

<td class="Example"> 
    <a href="example">Example</a> 
</td> 

Quand j'ouvre la page cependant, tout ce que je reçois est une cellule qui dit Exemple sans image de fond. Aucune suggestion?

Answer 1

Essayez

.Example { 
background-image:url("image1.gif"),url("image2.gif"),url("image3.gif"); 
background-position: top left, top center, top right; 
background-repeat: no-repeat; 
} 

sans les trois paramètres sur background-repeat. Et n'oubliez pas que cela ne fonctionne pas dans tous les navigateurs.

Je vous suggère d'utiliser le mode à l'ancienne pour résoudre ce problème. Mettez un lien sur chaque image avec le même href.

Answer 2

Les seuls projets de navigateur ayant cette fonctionnalité mis en œuvre jusqu'à présent sont WebKit et KHTML (Konqueror). Cela est entré dans Safari 1.3 si, et fonctionne en OmniWeb 5.5 et plus.

Source

Answer 3

Avoir plusieurs images d'arrière-plan dans le même élément et les limites actuelles ont été répondues ici: layering-images-in-css-possible-to-put-2-images-in-same-element et aussi ici: an-i-have-multiple-background-images-using-css

Actuellement tous les navigateurs prennent en charge cette fonctionnalité comme indiqué dans les réponses dans les liens ci-dessus. Il existe également des suggestions de solutions de rechange, telles que l'utilisation de plusieurs Divs et le placement de chaque image dans son propre div et l'utilisation de z-orders pour afficher les divs comme requis.