Отображать время или любой текст на изображении с помощью CSS? - PullRequest
Новая
       3

Отображать время или любой текст на изображении с помощью CSS?

2 голосов
/ 31 января 2011

У меня есть изображение на моей странице, я хочу отобразить некоторый текст на этом изображении, в маленькой черной области, так же, как YouTube делает то же самое для видео в листинге: http://www.youtube.com/charts

Youtube показывает «3.04» или подобное время в виде превью, я хочу сделать то же самое, что будет для CSS и HTMl strcuture для того же.

Пожалуйста, помогите, спасибо!

Ответы [ 2 ]

7 голосов
/ 31 января 2011

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;
}
0 голосов
/ 31 января 2011

вы можете использовать свойство Z-index в 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...