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中,你可以这样做:

工作演示

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 改变你的变量.