CSS/HTML：在我的图像上放置文本标签

我想在图像上加一个小的文本标签。有人能帮我吗

将图像放在div的背景中并在其上书写是一个选项，但由于我正在处理一个动态项目，我需要保持css静态

以下是我尝试过的：

HTML:

<div class="image">
  <p class="text">Category</p>
</div>

.image{
 height:40%;
 width:100%;
 text-align:center;
 padding-top:2px;
 background-image:url(Lighthouse.jpg);
 background-size:100% auto;
 }

利用这一点，我创建了如下内容：

---

现在，由于我要使用Django，我不希望图像使用css。我想把它放在我的html文件中。

如果你真的需要它放在html中，你可以这样做：

HTML:

---

当然，将

从python更改为变量。

CSS中的任何内容都可以动态更改。但不管怎样，你需要给我们更多的东西。比如，你尝试了什么，你被困在哪里了，也许可以发布你的代码让我们看看at@Deryck我已经编辑了我的问题。是的！明白了：）谢谢德里克。完成！

<div class="imgHolder">
    <img src="https://www.google.com/images/srpr/logo11w.png" />
    <span>Here's the overlay text</span>
</div>

.imgHolder {
    position: relative;
}
.imgHolder span {
    position: absolute;
    right: 10px;
    top: 10px;
}