问题描述:

I have an image on my page, I want to display some text on that image, in small black area, just like youtube do the same thing for video time in listing: http://www.youtube.com/charts

Youtube display "3.04" or similar time in video thumbs, I want to do the same thing, what will be the CSS and HTMl strcuture for the same.

Please help, Thanks!

网友答案:

http://jsfiddle.net/RU5Dv/

<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;
}
网友答案:

you can use Z-index property in CSS.

 <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>
相关阅读:
Top