2

我试图放在一起的基本上是用缩略图右下角的时间戳重新制作 YouTube 缩略图，如下所示：

http://i.imgur.com/T1dXnhP.png

但是，我似乎无法弄清楚如何让时间戳出现在图像之上，然后正确定位。

这是 JSFiddle：http: //jsfiddle.net/MgcDU/4162/

HTML：

<div class="container">
  <div class="small-video-section">
    <div class="thumbnail-container">
      <img src="http://i2.ytimg.com/vi/yKWoPlL2B8I/mqdefault.jpg" width="220" />
    </div>
    <div class="thumbnail-time">
      5:42
    </div>
  </div>
</div>

CSS：

.small-video-section {
  height: 134px;
}

.thumbnail-container {
  margin-top: 15px;
  margin-right: 20px;
}

.thumbnail-last {
  margin-top: 15px;
}

.thumbnail-time {
  display: inline;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: #ffffff;
  background-color: #000000;
  opacity: 0.8;
  padding: 2px 4px 2px 4px;
}

请帮忙！

4

4 回答 4

5

您可以尝试将这样的内容添加到您的.thumbnail-time并将其移动到.thumbnail-container：

  display:inline-block;
  position:relative;
  bottom:18px;
  right:52px;

jsfiddle

如果您现在为容器指定宽度（例如 220 像素）并且position:relative;，您现在可以将其添加到您的.thumbnail-time：

  display:inline-block;
  position:absolute;
  bottom:10px;
  right:10px;

并且时间将始终位于缩略图底部和右侧 10px 处。

jsfiddle

于 2013-05-11T23:14:24.027 回答
3 
position: relative;
left: 180px;
bottom: 30px;

将其添加到您的 .thumbnail-time 中是可行的，但它可能并不理想。

于 2013-05-11T23:09:52.787 回答
2

你需要使用

position:absolute;

添加也是一个好主意

z-index:1000;

在包含时间的 div 上。

像这样：http: //jsfiddle.net/MgcDU/4181/

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index?redirectlocale=en-US&redirectslug=CSS%2Fz-index

于 2013-05-11T23:08:01.090 回答
2

看看这个：http: //jsfiddle.net/MgcDU/4172/

我不是专家，但它有效。如果您找到更好的解决方案评论并告诉我，我也可以学习:)

.small-video-section {
    height: 134px;
}
.thumbnail-container {
    margin-top: 15px;
    margin-right: 20px;
    position: absolute;
    display:inline-block;
}
.thumbnail-last {
    margin-top: 15px;
}
.thumbnail-time {
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    margin-top:20px;
    position:absolute;
    z-index:1;
    color: #ffffff;
    background-color: #000000;
    opacity: 0.8;
    padding: 2px 4px 2px 4px;
    display:inline;
}
于 2013-05-11T23:09:56.807 回答