How to add text to pictures in html

Adding method: 1. Use the position attribute to add a relative positioning style to the container element div containing pictures and text; 2. Use the position attribute to add an absolute positioning style to the text element; 3. Use the left and top attributes to set the text The position of the element on the picture, just position the text on the picture.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

How to add text to html pictures:

1. Create a new html file named test.html for Explain how to add text to images using html css.

2. In the test.html file, use the div tag to create a module, and within the div, use the img tag to create an image.

3. In the test.html file, within the div tag, use the p tag to create a piece of text. Next, the text will be added to the image through css.

4. In the test.html file, in the css tag, use "*" to initialize the inner and outer margins of all elements on the page to 0 to avoid affecting the following css style definition. .

5. In the css tag, set the style of the div element and define its position attribute as relative positioning (relative).

6. In the css tag, set the style of the p element within the div, and define its position attribute position as absolute positioning (absolute). This absolute positioning is relative to It depends on the position of the image. Let the text be 10px from the left edge of the image and 10px from the top edge of the image, and set the text color to red.

7. Open the test.html file in the browser to check the effect.

For more programming related knowledge, please visit: Programming Video! !

The above is the detailed content of How to add text to pictures in html. For more information, please follow other related articles on the PHP Chinese website!