Geek Answers Handbook

CSS: how to "capture" invisible text over an image?

Say I have a webpage with a 200x200 image. At coordinates 50,50,150,150 (x1, y1, x2, y2), let's say I have the letter "A".

How to do the following in CSS:

  • Image overlay on character “A” starting at x1, y1?
  • Size of text so that it matches x1, y1, x2, y2?
  • Make the text invisible (but still on the "top" image so that it can be selected)?

In addition, we say that this image can be moved by the user (for example, using drag and drop). How to keep the position of the overlaid text?

+4
source share
4 answers

Using an absolute positional wrapper, we can use the img tag to add to the image, and then use span to contain the overlay text, for example:

 <div id="wrapper"> <img src="image.png" alt="" /> <span id="text">A</span> </div>

Part one is simple: the absolute positioning of the span inside the relative positional wrapper, we can move the span to the correct position:

 #wrapper { position: relative; } #wrapper #text { position: absolute; top: 50px; left: 50px; }

Part two is a little weirder. The problem is that when using fonts, font-size of 100px will not actually force the font to fill a field with a height of 100 pixels. You need to experiment to find the right font size. However, we can resize the span so that it has a width of 50 pixels and a height of 50 pixels:

 #wrapper #text { display: inline-block; width: 100px; height: 100px; font-size: 100px; line-height: 1em; text-align: center; vertical-align: middle; }

Adding border will show that the range is the right size, and the letter is centered both vertically and horizontally.

Finally, part three is simple if we focus only on modern browsers. Using the rgba color with zero transparency, we can make the text invisible and selectable at the same time.

 #wrapper #text { color: rgba(255, 255, 255, 0); }

Bonus: dragging things. . Dropping the jQuery UI Draggable , we can easily make the box draggable, Adding the cancel option so that the text remains optional, and we are done!

 $('#wrapper').draggable({ cancel: '#text' });

See it all together: http://www.jsfiddle.net/yijiang/83W7X/

+1
source

My first thought is that you set the image as the background for a span , div or other element of the container (which is suitable for the content and its purpose on your page), and then use the indentation to position the character inside the container. Change the text by setting font-size to the container, and then use text-indent: -999999px so that the text is hidden.

The position of the text will remain unchanged when moving the containing element, since the position is relative to the container.

0
source

Using the canvas, first set the background image. Then using the following method

 void fillText(in DOMString text, in float x, in float y, [optional] in float maxWidth);

set the text on top of it.

0
source

Just create a map

Example

(with a letter :)) at http://www.jsfiddle.net/gaby/dKuBc/

-1
source

More articles: