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

Question

我想在图片上放一个小文字标签。有人可以帮我解决这个问题吗？

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

以下是我的尝试：

HTML：

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

CSS：

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

使用这个我创建了这样的东西：

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

Answer 1

如果您确实需要HTML，可以执行以下操作：

Working demo

HTML：

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

CSS：

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

当然，将<img src="">更改为python中的变量。

Answer 2

看看PHP / GD。

http://www.php.net/manual/en/book.image.php

您可以使用GD轻松地向图像添加内容。