Handpuzzles.com


Comment mettre du texte sur des images sur une page Web

Comment mettre du texte sur des images sur une page Web

moins de positionnement sur une image sur une page web peut être accompli de plusieurs manières. Certaines méthodes sont navigateur-dépendante et produisent des effets imprévisibles ou ne apparaissent pas du tout dans un ou plusieurs navigateurs; par exemple, Internet Explorer ne affiche pas la table des images de fond. Une méthode simple consiste à utiliser un programme de graphiques de mettre le texte sur l'image et sauvegarder le résultat comme une nouvelle image. Une autre option consiste à placer le texte dans une position absolue sur la page en ajoutant un élément à votre feuille de style en cascade (CSS), ou en déclarant la position directement dans le code HTML.

Instructions


•  Ajoutez votre image à votre code de la page à l'endroit approprié. Utilisez le code "<img src =" image-name ">" (sans les guillemets externes) remplacer "image-name" le nom et l'emplacement de votre image.

•  Calculer la position en pixels du début du texte sur la page web, en référence au coin supérieur gauche de la fenêtre du navigateur. Un localisateur d'image (voir Ressources) peut vous aider à résoudre ce point. Par exemple, vous voudrez peut-être que le texte apparaisse 250 pixels à partir du haut de l'écran et 20 pixels de la gauche. Si l'image occupe déjà cet espace, le texte apparaîtra au-dessus.

•  Calculer la hauteur et la largeur du texte sur la page, en pixels. Cela varie en fonction de la police utilisée et vous devrez peut-être par tâtonnements trouver les bonnes dimensions. Par exemple, votre texte peut être de 200 pixels de large et 25 pixels de haut.

•  Ajoutez le code HTML à la page comme une division. Par exemple: <div style = "position: absolute; top: 250px; gauche: 20px; largeur: 200px; hauteur: 25px"> </ div> Cela place le texte 250 pixels à partir du haut de la fenêtre et à 20 pixels du à gauche, dans une division 200 pixels de large et 25 pixels de haut. Notez le point-virgule entre les éléments.

•  Ajouter le texte à la division avant la finale </ div>. Par exemple, pour ajouter le texte "Votre texte ici" à la division, utilisez le code: <div style = "position: absolute; top: 250px; gauche: 20px; largeur: 200px; hauteur: 25px"> Votre texte ici < / div> Vous pouvez définir le style du texte avec la famille de police, la couleur et la taille des commandes.




        

Publish my comment