在图像上放置文字

Question

How it is possible to place only a part of the text over an image in html? Considering the following example: http://jsfiddle.net/EgLKV/3/

I would like to reach that the "Hello" word is outside the image on the left side. And the "World" word is within the image. I added -50px to the left attribute which gave me the desired result.

 #text{
   z-index:100;
   position:absolute;    
   color:white;
   font-size:24px;
   font-weight:bold;
   left:-50px;
   top:350px;
}

My question is if this a good idea to reach this result. Or would it be better to make a second outer container holding the "Hello" word? Any suggestions? Thank you

Answer 1

I think it depends on what you plan to do with the space to the left. Adding an outer container could cause additional problems if you need to use that space, but if it's going to be empty I don't think it really makes much of a difference.