CSS Aide: positionnement du texte par-dessus l'image

Dites que j'ai une image de 1000x1000. En haut de l'image, je veux placer, disons, la lettre "A". Voici les détails:CSS Aide: positionnement du texte par-dessus l'image

valeur inférieure est de 160 (sens, la plus basse partie du « A » est assis 160px à partir du haut de l'image)
valeur de gauche est aussi 160 (sens, la partie gauche du "A" est assis 160px de la gauche de l'image)

J'ai besoin que ce positionnement soit relatif. Dites l'image est réduite à 50% de sa taille d'origine, puis les valeurs inférieures et gauche devraient devenir 80 et 80. (En passant, j'ai choisi 160px comme exemple, donc la conversion à em serait facile.)

L'image doit probablement être dans son propre conteneur car il doit également être positionné sur la page. Mais maintenant, j'ai juste besoin d'aide pour positionner les lettres sur une image. Toute orientation que vous pouvez offrir est appréciée.

Source

2010-11-17 StackOverflowNewbie

Est-ce une image de fond dans css? Padding devrait positionner le texte correctement avec cela. –

utiliser un div avec un fond image et texte à l'intérieur. positionnez le texte.

i.e.

<div id="imageHolder"><span class="imageText"> some text</span> </div> 

#imageholder { 
width: 1000px; 
height: 1000px; 
background: transparent url(path/to/your.img) 0 0 no-repeat; 
position: relative; 
} 
.imageText { 
position: absolute; 
top: 160px; 
left: 160px; 
}

vous pouvez utiliser des pourcentages pour le haut et les valeurs de gauche lors du redimensionnement. ou tripoter ici: http://jsfiddle.net/SebastianPataneMasuelli/Gg29e/1/

Source

2010-11-17 21:06:09

@Sebastian: J'ai modifié votre solution pour qu'elle soit en ligne CSS. Voir: http://jsfiddle.net/Gg29e/3/. Dois-je utiliser le pourcentage pour que le texte soit relatif à l'image? Est-ce que ça va marcher? Y aura-t-il des problèmes avec cette solution? – StackOverflowNewbie

@Sebastian: également, l'utilisateur visualisant cette image avec un texte superposé redimensionnera l'image (par exemple, comme une fonction de zoom). Comment est-ce que je configurerais ceci de telle manière que j'aurais besoin de modifier le moins de CSS en ligne pour que les choses s'alignent toujours correctement? – StackOverflowNewbie

un problème difficile sans plus de détails. Qui êtes-vous les navigateurs/appareils cibles? est-ce que ie6 est important? est-il absolument nécessaire d'utiliser des styles en ligne? pourriez-vous modifier dynamiquement les valeurs des classes css? pouvez-vous utiliser la propriété css zoom? sans réponses très précises à ces problèmes, il est difficile de répondre à une question comme «y aura-t-il des problèmes»? Je suggère d'essayer une erreur avec les méthodes décrites dans ces réponses, puis de poster des questions très spécifiques. –

Comme par mon commentaire, il suffit d'utiliser une image de fond et certains padding:

http://jsfiddle.net/Xzbcy/

Essayez cet effort combiné de moi et Seb:

http://jsfiddle.net/Gg29e/4/

Source

2010-11-17 21:05:17

@Grillz, je ne vois pas comment vous tracez le texte. Aussi, pouvez-vous montrer comment faire cela en utilisant CSS en ligne? J'ai besoin de générer dynamiquement le balisage et CSS pour ce problème. – StackOverflowNewbie

@Newbie le remplissage place le texte. dans votre exemple, ce serait: padding-left: 160px; rembourrage-top: 160px; –

btw, la solution de Grillz est la plus élégante si vous avez seulement besoin de placer un élément de texte sur l'image. –

Si l'image est un bg img, vous pouvez essayer quelque chose comme ça (je l'ai pas testé si)

Enfermez l'image dans un div
Marque hauteur et largeur de l'auto div pour obtenir la hauteur et la largeur de l'image
Placez votre texte dans une plage et donnez-lui un index z plus élevé que votre image (disons z-index 2 pour la plage et 1 pour la plage image)
Vous pouvez ensuite placer votre span par rapport à la div et il devrait app oreille au-dessus de votre image.

Source

2010-11-17 21:06:33

CSS Aide: positionnement du texte par-dessus l'image

Répondre

Questions connexes