How to add text to pictures with css

Method: 1. Put the picture elements and text elements into the same div container; 2. Use the "picture element {position:relative}" statement to add a relative positioning style to the picture element; 2. Use "text Element {position:absolute}" statement can add absolute positioning style to text elements.

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

How to add text to pictures with css

You can use the position attribute to set the position of the text, thereby adding text to the picture. The following example explains how to add text to images using html css.

Examples are as follows:

1. Create a new html file, named test.html, to explain how to add text to images using html css. Use the div tag to create a module, and within the div, use the img tag to create an image. Within the div tag, use the p tag to create a piece of text. Next, you will add the text to the image through css. 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.

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

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 the position of the picture, so that the distance between the text and the picture is 10px from the left edge, 10px from the top edge of the image, and set the text color to red.

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

Summary:

1. Create a test.html file.

2. In the file, use the div tag to create a module, within the div tag, use the img tag to create an image, and use the p tag to create a piece of text.

3. Use css to set the position attribute of the div tag to relative positioning (position:relative;), set the p tag to absolute positioning (position:absolute;), and then use the left and top attributes to set the p tag in location on the picture.

Note:

The html tags of images and text must be included in a container (div).

(Learning video sharing: css video tutorial)

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