私はユーチューブがリストに動画の時間のために同じことを行うと同じように、小さな黒い領域に、その画像の上にテキストを表示したい、自分のページ上のイメージを持っている：http://www.youtube.com/chartsCSSを使用して画像上の時間またはテキストを表示しますか？
YouTubeの表示「3.04」または類似私は同じことをしたい、同じもののためのCSSとHTMlのstrcutureは何でしょうか。
お願いします、ありがとうございます！あなたはCSSでZ-indexプロパティを使用することができます
<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;
}
。
<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>