Question

我正试图在引导程序中的媒体对象内的图像上放置两个不同的东西。其中一个是徽章/标签，应该放在图像的右下角，但目前我只能让它显示在左上角。另一个是播放图标，应该会在图像中间显示出来。

这是代码，也是一个jsfiddle：

HTML：

      <a class="news-link" href="#">
        <div class="media">
          <div class="image-container">
            <img class="pull-left img-responsive" src="http://i59.tinypic.com/16m9f1f.png">
            <div class="video-badge">
              <h6>Badge</h6>
            </div>
            <div class="play-icon">
              <img class="img-responsive" src="http://i57.tinypic.com/20jptok.png">
            </div>
          </div>
          <div class="media-body">
            <h4 class="media-heading">Title</h4>
            Content
          </div>
        </div>
      </a>

CSS（以及我放在jsfiddle上的其他一些和Bootstrap）：

.image-container {
    position: relative;
}

.image-container img {
    padding-right: 10px;
}

.video-badge {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  padding: 5px 25px 5px 10px;
  overflow: hidden;
  z-index: 1;
}

.video-badge h6 {
    text-decoration: none;
    color: #fafafa;
    margin: 0;
}

.video-badge:after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #5e4c33;
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: skew(-25deg);
  -ms-transform: skew(-25deg);
  transform: skew(-25deg);
  z-index: -1;
}

.play-icon {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  padding: 5px 25px 5px 10px;
  overflow: hidden;
  z-index: 1;
  max-width: 85px;
}

的jsfiddle： http://jsfiddle.net/pgo7h903/

Answer 1

像这样改变你的CSS

CSS代码：

        .image-container {
            display: inline-block;
            float: left;
        }
   .play-icon {
    display: inline-block;
    left: 0;
    margin: 0 auto;
    max-width: 85px;
    overflow: hidden;
    padding: 75px 25px 5px 10px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}
.video-badge {
    bottom: 0;
    display: inline-block;
    left: 0;
    overflow: hidden;
    padding: 5px 25px 5px 10px;
    position: absolute;
    z-index: 1;
}
    .media img.pull-left.img-responsive {
        max-width: 100%;
    }

参见演示http://jsfiddle.net/JentiDabhi/65ajj56j/4/

Answer 2

@JentiDabhi的答案有效，但不是一种有效的代码方式，因为它占用了大量的代码。试试这个：

.play-icon {
    width: auto;
    margin: 65px;
}

将它添加到您的CSS中，它应该居中。如果您觉得它没有居中，请将margin更改为margin-right和margin-top并在那里进行更改。

修改

对于徽章，请添加：

.video-badge { margin-left: 201px; margin-top: 143px; }

现在它应该在图像的右下角。

使用绝对位置将图片置于另一张图片的顶部

2 个答案: