CSS / HTML：在我的图片上放置一个文本标签 [英] CSS/HTML : Putting up a text label on my image

问题描述

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

将图片放在div的背景上并写在它上面是一个选项，但是当我在处理动态项目时，我需要保持静态CSS

以下是我试过的内容：

$ b HTML：

 < div class =image> 
< p class =text>类别< / p> 
< / div> 
  

CSS：

  .image {
 height：40％; 
宽度：100％; 
 text-align：center; 
 padding-top：2px; 
 background-image：url（Lighthouse.jpg）; 
背景大小：100％自动; 
 
 
 
 
 
 $ b 
使用这个我创建了这样的内容： 
的图片
 
 
现在，当我要使用Django时，我不会不希望图像在CSS中。我想把它放在我的html文件中。 
解决方案
如果您确实需要HTML，您可以这样做： 
 
 
 工作演示 
 
 
 
 HTML：
 
 
 
 < div class =imgHolder> 
< img src =https://www.google.com/images/srpr/logo11w.png/> 
< span>以下是覆盖文字< / span> 
< / div> 
  
 
 
 
 CSS：
 
 
 
  .imgHolder {
 position：relative; 
} 
 .imgHolder跨度{
位置：绝对; 
 right：10px; 
 top：10px; 
} 
  
当然，更改< img src = > 到python的变量。
 
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

Here is what I have tried :

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;
 }
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. 
解决方案
If you really need it in the HTML you can do something like this:

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;
}
And of course change your <img src=""> to a variable from python.

                        
这篇关于CSS / HTML：在我的图片上放置一个文本标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！