Css+div: Surround text characters around your picture

Css

See the above effect, you may think that this is a picture with text; hehe, use your mouse to select text to see, found it, this is completely a picture and the combination of words, below I will introduce how it is done.

First look at the code:

　　

The following is a reference fragment: <div id= "Info" > <div id= "Holdit" > <em class= "A420" ></em> <em class= "a430" ></em> <em class= "a400" ></em> <em class= "a370" ></em> <em class= "A340" ></em> <em class= "A300" ></em> <em class= "a270" ></em> <em class= "a250" ></em> <em class= "a240" ></em> <em class= "a230" ></em> <em class= "a230" ></em> <em class= "A340" ></em> <em class= "A340" ></em> <em class= "a360" ></em> <em class= "a540" ></em> <em class= "a540" ></em> <em class= "a540" ></em> <em class= "a550" ></em> <em class= "a550" ></em> <em class= "a550" ></em> <em class= "a550" ></em> <em class= "a550" ></em> <em class= "a550" ></em> <em class= "a540" ></em> <em class= "a460" ></em> <em class= "a490" ></em> <em class= "A500" ></em> <em class= "A500" ></em> <p> "I shall have to wait until I catch up with it," said Winnie-the-pooh. "Now, look there." He pointed to the ground in front of him. "What Do you there?" <br/> "Tracks," said Piglet. "Paw-marks." He gave a little squeak of excitement. "Oh, pooh! Do you have the IT ' s a--a--a woozle? <br/> "It May," said Pooh. "Sometimes it is, and sometimes it isn ' t." You are never can tell with Paw-marks. " <br/> With these few words him went on tracking, and Piglet, after watching him for a minute or two, after ran. Winnie-the-pooh had come to a sudden stop, and is bending over the tracks in a puzzled sort of way.<br/> "What ' s the matter?" asked Piglet.<br/> "It's a very funny thing," said Bear, "but there-seem to being two animals now. This--whatever-it-was--has been joined by another--whatever-it-is-- And the two of them are now proceeding. Would you are mind coming with me, piglet, in case they turn out to be hostile Animals? " <br/> Piglet scratched his ear in a nice sort of way, and said which he had nothing to do until Friday, and would is delighted to Come, in case it really is a woozle.<br/> "You mean, in the case it really are two woozles," said Winnie-the-pooh, and Piglet said that anyhow he had Friday. So off they went together.</p> </div> </div>

　　

The following is a reference fragment: #info h3{Text-align:center; } #holdit {width:700px;position:relative;Margin:3em Auto; padding:10px; border:1px solid #ddd;} #holdit img {Position:absolute; z-index:1;top:10px; left:10px; } #holdit p {margin:0px; position:relative; z-index:10; line-height:18px ;text-align:justify; font-size:10px; Font-family:verdana, Arial, Sans-serif} #holdit em {display:block; float:left; height:18px; clear:left ;Overflow:hidden; } . a230 {width:230px} . a240 {width:240px} . a250 {width:250px} . a270 {width:270px} . A300 {width:300px} . a340 {width:340px} . a360 {width:360px} . a370 {width:370px} . a400 {width:400px} . a420 {width:420px} . a430 {width:430px} . a460 {width:460px} . a490 {width:490px} . A500 {width:500px} . a540 {width:540px} . a550 {width:550px}

And then we'll analyze the red highlighted part:

First, the containment object #holdit is set to relative positioning (make sure that the IMG absolute position is equal to the original point in its upper-left corner)

Then the #holdit inside the IMG set to absolute positioning and z-index height of 1, so that img out of the document flow

Set the EM tag to the left, the height and the ling-height of P, and then set each em width according to the pattern of the picture (remember to clear to remove the float)

Finally, the p is set to relative positioning and the z-index height is set to a value greater than img

In fact, we can also directly to the image as a #holdit background, so you do not need specifically for the IMG to set CSS

<STYLE> #info h3{Text-align:center;} #holdit {width:700px; position:relative; margin:3em auto; padding:10px; border:1px solid #ddd;} #holdit img {position:absolute; z-index:1; top:10px; left:10px;} #holdit p {margin:0px; position:relative; z-index:10; line-height:18px; text-align:justify; font-size:10px; Font-family:verdana, Arial, sans-serif} #holdit em {display:block; float:left; height:18px; clear:left; overflow:hidden ; }.a230 {width:230px}. a240 {width:240px}. a250 {width:250px}. a270 {width:270px}. A300 {width:300px}. A340 {width:340px}. a360 {width:360px}. a370 {width:370px}. a400 {width:400px}. a420 {width:420px}. a430 {width:430px}. a460 {width:460px}. a490 {width:490px}. A500 {width:500px}. a540 {width:540px}. a550 {width:550px;} </style><div id= "Info" ><p>tracking YOUR images</p><div id= "Holdit" ></eM><em class= "a430" ></em><em class= "a400" ></em><em class= "a370" ></em><em class= "A340" ></em><em class= "A300" ></em><em class= "a270" ></em><em class= "a250" "></em><em class=" a240 "></em><em class=" a230 "></em><em class=" a230 "></ Em><em class= "A340" ></em><em class= "A340" ></em><em class= "a360" ></em>< EM class= "a540" ></em><em class= "a540" ></em><em class= "a540" ></em><em class= " a550 "></em><em class=" a550 "></em><em class=" a550 "></em><em class=" a550 "> </em><em class= "a550" ></em><em class= "a550" ></em><em class= "a540" ></em> <em class= "a460" ></em><em class= "a490" ></em><em class= "A500" ></em><em class = "A500" ></em><p> "I shall have to wait until I catch up with it," said Winnie-the-pooH. "Now, look there." He pointed to the ground in front of him. "What Do you there?" <br/> "tracks," said Piglet. "Paw-marks." He gave a little squeak of excitement. "Oh, pooh! Do you have the IT ' s a--a--a woozle? <br/> "It May," said Pooh. "Sometimes it is, and sometimes it isn ' t." You are never can tell with Paw-marks. " <br/>with These few words him went on tracking, and Piglet, after watching him for a minute or two, after ran. Winnie-the-pooh had come to a sudden stop, and is bending over the tracks in a puzzled sort of way.<br/> "What ' s th E matter? "asked Piglet.<br/>" It's a very funny, "thing bear," said but-there-to is seem two now. This--whatever-it-was--has been joined by Another--whatever-it-is--and the two of them, now are. Would you are mind coming with me, piglet, in case they turn out to be hostile Animals? " <br/>piglet scratched his ear in a nice sort of way, and said the he had no do until Friday, And would be delighted to come, in case it really being a woozle.<br/> "You mean, in the case it really are two woozles," Said Winnie-the-pooh, and Piglet said that anyhow him had nothing to do until Friday. So off they went together.</p> </div></div>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]