CSS/HTML：在我的图像上放置一个文本标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20878929/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS/HTML : Putting up a text label on my image
提问by vhd
I want to put a small text label on the image. Can someone help me out with that ?
我想在图像上放一个小文本标签。有人可以帮我解决这个问题吗？
Putting the image in the div's background and writing on it is an option but as I am working on a dynamic project, I need to keep the css static
将图像放在 div 的背景中并在其上书写是一种选择，但由于我正在处理动态项目，因此需要保持 css 静态
Here is what I have tried :
这是我尝试过的：
HTML:
HTML：
<div class="image">
<p class="text">Category</p>
</div>
CSS:
CSS：
.image{
height:40%;
width:100%;
text-align:center;
padding-top:2px;
background-image:url(Lighthouse.jpg);
background-size:100% auto;
}
Using this I have created something like this : 
使用这个我创建了这样的东西：
Now, as I am going to use Django, I don't want the image to be in css. I want to place it in my html file.
现在，由于我将使用 Django，我不希望图像出现在 css 中。我想把它放在我的 html 文件中。
回答by Deryck
If you really need it in the HTML you can do something like this:
如果您真的需要在 HTML 中使用它，您可以执行以下操作：
Working demo
工作演示
HTML:
HTML：
<div class="imgHolder">
<img src="https://www.google.com/images/srpr/logo11w.png" />
<span>Here's the overlay text</span>
</div>
CSS:
CSS：
.imgHolder {
position: relative;
}
.imgHolder span {
position: absolute;
right: 10px;
top: 10px;
}
And of course change your <img src="">to a variable from python.
当然，将您<img src="">的变量更改为 python 中的变量。
