Je crée une page Web et j'essaie de mettre un PNG (boutons) sur des fichiers GIF. Lorsque la page rend la page, le fichier PNG apparaît après ou sous le fichier GIF. J'ai essayé d'utiliser et des tags mais ni de travailler. J'ai également essayé d'utiliser divers remplissages, alignements, etc., mais cela ne semble pas fonctionner. Existe-t-il un moyen (code) pour obtenir des images à apparaître sur des images?
4 Réponses :
Utilisez l'attribut CSS "image de fond" sur un élément de niveau de bloc ( Comme ceci: Chaque élément d'une page a un ordre d'empilement particulier. Si vous ne les définissez pas explicitement, il sera empilé conformément à l'ordre dans DOM.
Vous pouvez contrôler l'ordre d'empilement en définissant la propriété
Plus la valeur d'index Z est élevée, la valeur supérieure sera la commande d'empilement de l'élément.
Si vous pouvez définir l'image GIF comme arrière-plan d'une cellule, alors
image-image < / p>
La propriété sera la meilleure. D'abord, réglez l'image GIF comme arrière-plan de la cellule et placez le bouton PNG dans la cellule et placez-la à l'intérieur de la cellule.
Le "Z" dans Z-Index fait référence à l'axe 3 dimensionnel qui s'étend à travers votre écran; C'est pourquoi cela s'appelle Z-Index. Comme les autres personnes ont déclaré - si vous souhaitez mettre des images sur une autre, vous avez besoin de z-indexation. Rappelez-vous simplement que l'index Z ne fonctionne que si des éléments imbriqués ont un ensemble de position - absolu ou relatif (statique ne doit pas être utilisé pour cela) MDN est une excellente ressource pour des questions telles que celle-ci. Comprendre CSS Z-Index Article fournit de différentes façons de accomplir ce que OP est après. Quelques-uns sont rapidement couverts ci-dessous. P> Ceci inclut tous les six exemples de base I Configuration. P> p> , etc.) pour le gif de fond, puis placer Les boutons PNG à l'intérieur de cet élément de bloc.
0 commentaires
5
votes
1 commentaires
1
votes
0 commentaires
0
votes
Solutions générales
Tous les exemples h3>
background:
url(number.png) 600px 10px no-repeat, /* On top, like z-index: 4; */
url(thingy.png) 10px 10px no-repeat, /* like z-index: 3; */
url(Paper-4.png); /* On bottom, like z-index: 1; */
0 commentaires