HTML displays text on the Image

Example:

The first method is to use the image as the background image, that is, background-image: URL (".......");

You can control the horizontal and vertical Tile of the background image here:

Background-repeat: none; Do not tile

Background-repeat: Repeat-X; horizontal X axis tiled

Background-repeat: Repeat-y; horizontal Y axis tiled

Background-repeat: Repeat; the horizontal and vertical y axes are tiled, which is also the default status.

 

The second method is to place the IMG block and text block in the same Div, and then set the position between them, for exampleCodeBlock:

<Div style = "position: relative;">

<Div style = "position: absolute; Z-index: 2; left: 10px; top: 10px">

Haha

</Div>

</Div>

Fine-tune the remaining locations based on actual conditions ~~

 

Differences between relative and absolute attribute values in position:

Position: absolute. This is absolute positioning;
Is relative to the browser positioning.
For example, position: absolute; left: 20px; top: 80px; the container is always located at the position 20px left of the browser and 80 PX away from the browser.

Position: relative is relative positioning, which is relative to the previous container positioning. In this case, the top left cannot be used for positioning. Margin should be used.

For example: <Div class = "1"> </div> <Div class = "2"> </div>

When 1 is fixed. 1 style float: Left; width: 100px; Height: 800px;
The Style 2 is float: Left; position: relative; margin-left: 20px; width: 50px;
2 is located at the right of 1, PX away

 

More please see: http://net08118.blog.163.com/blog/static/11011170420129193741264/

Http://blog.csdn.net/chhuma/article/details/7484940

 

To limit the maximum width and height of an IMG tag, use the max-width and max-height attributes. The code below: