Bonjour à tous,
Sur une de mes pages webs j'ai un tableau de 42 cases.
Mon souhait est d'insérer AU-DESSUS de l'intégralité du tableau une grande image de la même taille.
L'intérêt ? L'image a certaines zones transparentes et je vais faire varier la couleur des cases du tableau selon certaines caractéristiques.
Pouvez-vous me dire comment faire ?
Merci par avance,
Antoine

Euh, pas tout compris...
 
Elle sert à quoi l'image ?

C'est pour créer un Puissance 4.
J'ai une image du plateau avec les ronds transparents.
Et selon ce que jouent les joueurs, les ronds prendront la couleur JAUNE ou BLEU.
J'aimerais donc utiliser un tableau SOUS l'image et attribuer les couleurs de mon choix à mes cases.
 
Comment donc placer une image AU DESSUS d'un tableau ?

Autant mettre une image .png dans chaque case...
Sinon, en CSS, avec un conteneur commun et des positions en absolute:
 
<div id='puissance4' style='position:relative'>
   <table ...>
       ....
   </table>
   <img src='monMasque.png' alt='' style='display:block;position:absolute;top:0;left:0' />
<div>
 
(par exemple)

Pour la première position, comment mettre une image PNG dans chaque case par exemple ?
Merci bc en tout cas.

Personnellement, je serais parti sur un truc de ce genre :
 

div#plateau{
    width: 350px;
    height: 300px;
    background-image: plateau.png;
}
div#plateau div{
    width: 50px;
    height: 50px;
    float: left;
}
div#plateau div.jeton1{
    background: jeton.png;
    background-position: top left;
}
div#plateau div.jeton2{
    background: jeton.png;
    background-position: top right;
}

 
Avec l'image jeton.png qui regroupe les 2 jetons côte à côte.