Add text description and css text description on the image for css implementation

Add text description and css text description on the image for css implementation

Add text instructions on the image for css implementation:
In some image effects, there is a text description on the image. The following describes how to achieve this through code examples.
The code example is as follows:

 

<! DOCTYPE html> 
 
The above Code meets our requirements. The image has text instructions and translucent effects. The implementation principle is very simple, that is, to set the outermost div to use relative positioning, and then set the absolute positioning of the span element, so that the external div can be used as the positioning reference object, set the top attribute value. But the above is not perfect, because not only the background is transparent, but also the text is transparent. This is often not what we want to see. The Code is as follows:
<! DOCTYPE html> 
The above Code meets our requirements. The background is transparent but the text is not transparent. In the above Code, the reason why the text is transparent is that the transparent property has inheritance, and the sub-element will also have a transparent effect, in this way, you can use the positioning method to overwrite the span element of the text and overwrite the translucent span element.
The original address is: http://www.softwhy.com/forum.php? Mod = viewthread & tid = 12679.
For more information, see: http://www.softwhy.com/divcss/