Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to add text to a picture in html". In daily operation, I believe that many people have doubts about how to add text to a picture in html. The editor consulted all kinds of materials and sorted out a simple and easy-to-use method of operation. I hope it will be helpful to answer the doubt of "how to add text to a picture in html". Next, please follow the editor to study!

Add method: 1, use the position attribute to add relative positioning style to the container element div, which contains pictures and text; 2, use the position attribute to add absolute positioning style to the text element; 3, use the left and top attributes to set the position of the text element on the picture, and position the text on the picture.

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

How to add text to a html picture:

1. Create a new html file, named test.html, to explain how html+css adds text to the picture.

2. In the test.html file, use the div tag to create a module, and in div, use the img tag to create a picture.

3, in the test.html file, in the div tag, use the p tag to create a paragraph of text, which will be added to the picture through css.

4, in the test.html file, in the css tag, through "*" to initialize the internal and external margins of all the elements of the page to 0, to avoid affecting the following css style definition.

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

6, in the css tag, the p element within the div is styled, and its position attribute position is defined as absolute positioning (absolute), which is relative to the position of the picture, so that the text is 10px from the left edge of the picture, 10px from the upper edge of the picture, and set the text color to red.

7. Open the test.html file in the browser to see the effect of the implementation.

At this point, the study of "how to add text to a picture in html" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.