怎样在image控件上显示文字

img


这是我设计的一个网页母版页，现在在母版页上添加了一个image控件，我想在这个控件上显示一段文字该怎么办？

这个看一下


```html
<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>图片上显示文字</title>  
</head> 
<body>
    <div class="box">
        <img src="https://system.puluofaxian.com/shop/resources/species/81fae7da-a3fb-4d85-8e1a-568dfacb0eb3.jpg" />
        <span class="text">图片上的文字</span>
    </div>
</body> 
</html>
<style>
    .box{
        position: relative;
        
    }
    .box img{
        width: 400px;
        height: 200px;
        margin-left: 10px;
    }
    .text{
        position: absolute;
        top: 20px;
        left: 50px;
        font-weight: bold;
        color: red;
        
    }
</style>

```

用绝对定位