使用 CSS 在图像上显示时间或任何文本？答案

【问题标题】：Display time or any text on image with CSS?使用 CSS 在图像上显示时间或任何文本？
【发布时间】：2011-02-02 14:53:17
【问题描述】：

我的页面上有一张图片，我想在该图片上显示一些文本，在黑色的小区域中，就像 youtube 对列表中的视频时间做同样的事情：http://www.youtube.com/charts

Youtube 在视频拇指中显示“3.04”或类似时间，我想做同样的事情，相同的 CSS 和 HTMl 结构是什么。

请帮忙，谢谢！

【问题讨论】：

【解决方案1】：

<div class="imgblock">
  <img src="http://www.nataliedee.com/111908/whatever-dude-whatever.jpg">
  <div class="smallblackarea">3.04</div>
</div>

.smallblackarea {
    bottom: 5px;
    display: inline-block;
    margin-right: 0;
    margin-top: 0;
    position: absolute;
    right: 5px;
    background: rgba(0,0,0,0.5);
    color: #FFF;
}

.imgblock {
display: block;
position: relative;
width: 300px;
height: 200px;
}

.imgblock img {
position: relative;
width: 300px;
height: 200px;
}

【讨论】：

【解决方案2】：

您可以在 CSS 中使用 Z-index 属性。

 <html>
   <head>
  <styletype="text/css">

HTML, BODY {   margin: 0px;   padding:
0px;   border: 0px; }

#the-outside {   border: solid 1px black;   background-color: gray;  
width: 500px;   height: 400px; }

#image-holder {   background-image: url(your-image.png);   z-index: 1;  
position: absolute;   top: 0px;  
left: 0px;   width: 500px;   height:
400px; }

#text-holder {   z-index: 2;   position: relative;   top: 0px;  
left: 0px; }

</style> 
 </head> 
<body> 
<div id="the-outside">
 <div id="image-holder"><!-- image goes> here, "behind" the text --></div>  
<div id="text-holder">
<p>
  Here is some text - and some more here too. 
  Wheelbarrels are wonderful, aren't they?
</p>
<p>
  Here is some text - and some more here too. 
  Wheelbarrels are wonderful, aren't they?
</p>
<p>
  Here is some text - and some more here too. 
  Wheelbarrels are wonderful, aren't they?
</p>
<p>
  Here is some text - and some more here too. 
  Wheelbarrels are wonderful, aren't they?
</p>   </div><!-- end text-holder --> </div><!-- end the-outside --> 
</body> 
</html>

【讨论】：