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

This article mainly explains "how to add text to a picture by css". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "css how to add text to a picture".

Methods: 1, put the picture element and the text element into the same div container; 2, use the "picture element {position:relative}" statement to add the relative positioning style to the picture element; 2, add the absolute positioning style to the text element using the "text element {position:absolute}" statement.

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

How does css add text to a picture?

You can use the position property to set the location of the text to add text to the picture. Here is an example of how html+css can add text to a picture.

Examples are as follows:

1. Create a new html file, named test.html, to explain how html+css adds text to the picture. Use the div tag to create a module, and within div, use the img tag to create a picture. Within the div tag, use the p tag to create a paragraph of text that will be added to the picture via css. In the css tag, use "*" to initialize the outer and outer margins of all elements on the page to 0 to avoid affecting the following css style definition.

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

In the css tag, style the p element within the div and define its position attribute position 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.

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

At this point, I believe you have a deeper understanding of "css how to add text to a picture". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.