如何使覆盖元素响应？

Question

我在 bootstrap 中有一个缩略图视频库 3. 每个缩略图都有一个文本叠加层，鼠标悬停时会出现该文本叠加层。这一切都很好，但我现在正在尝试向叠加层添加一个播放图标。问题是，虽然原始文本缩略图有响应，但播放图标却没有。我做错了什么？

这是一个fiddle

<div class="container">
  <div class="row">
    <div class='col-sm-3 col-xs-6 col-md-3 col-lg-3 padding-0'>

      <div class="thumbnail">
        <a class="fancybox-media" data-fancybox-type="iframe" href="https://www.youtube.com/embed/PVob_tATVRI">

          <div class="caption">
            <h4 class="">Richard Feynman</h4>
            <p class=""> Watch Him</p>
          </div>
          <!-- /.caption-->
          <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-JZQIhP_M6qtpPy4Hih-LsyGSBe5m7OlaRi5INdHVGy-bJRYIUg" alt="" class="img-responsive"></a>
      </div>
      <!-- /.thumb-->
    </div>
    <!-- /.col -->
  </div>
  <!--end row-->
</div>
<!-- /.container -->

CSS

.thumbnail {
  position: relative;
  overflow: hidden;
  background: transparent;
  border: none;
}

.caption {
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.75);
  width: 100%;
  height: 100%;
  padding: 2%;
  display: none;
  text-align: left;
  color: #fff !important;
  z-index: 2;
  /*This is the play icon I ant to be responsive */
  background: transparent url(http://www.oceania-attitude.com/applications/site/views/oceania/images/icons/play-video.jpg) no-repeat center;
}

jQuery

$("[rel='tooltip']").tooltip();
$(document).ready(function() {
  $('.thumbnail').hover(
    function() {
      $(this).find('.caption').slideDown(250); //.fadeIn(250)
    },
    function() {
      $(this).find('.caption').slideUp(250); //.fadeOut(205)
    }
  );

});

Answer 1

您正在设置背景图片，但您没有指定尺寸，因此它将默认为完整尺寸。

您可以使用百分比设置相对于容器大小的 background-size，例如以下将使图像成为容器大小的一半：

background-size: 50%;

在您的情况下，如果您希望图像填充容器，您可以将背景设置为 100%，例如

background: transparent url([your url]/play-video.jpg) no-repeat center;
background-size: 100%;

工作片段：

/* Latest compiled and minified JavaScript included as External Resource */
$("[rel='tooltip']").tooltip();
$(document).ready(function() {
  $('.thumbnail').hover(
    function() {
      $(this).find('.caption').slideDown(250); //.fadeIn(250)
    },
    function() {
      $(this).find('.caption').slideUp(250); //.fadeOut(205)
    }
  );

});

.thumbnail {
  position: relative;
  overflow: hidden;
  background: transparent;
  border: none;
}

.caption {
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.75);
  width: 100%;
  height: 100%;
  padding: 2%;
  display: none;
  text-align: left;
  color: #fff !important;
  z-index: 2;
  background: transparent url(http://www.oceania-attitude.com/applications/site/views/oceania/images/icons/play-video.jpg) no-repeat center;
  background-size: 100%;
}

/* Added for tesing because your img-responsive class isn't working */
img {  width: 100%;  height: auto;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class='col-sm-3 col-xs-6 col-md-3 col-lg-3 padding-0'>

      <div class="thumbnail">
        <a class="fancybox-media" data-fancybox-type="iframe" href="https://www.youtube.com/embed/PVob_tATVRI">

          <div class="caption">
            <h4 class="">Richard Feynman</h4>
            <p class="">

              Watch Him</p>
          </div>
          <!-- /.caption-->
          <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-JZQIhP_M6qtpPy4Hih-LsyGSBe5m7OlaRi5INdHVGy-bJRYIUg" alt="" class="img-responsive">
        </a>
      </div>
      <!-- /.thumb-->
    </div>
    <!-- /.col -->

  </div>
  <!--end row-->

</div>
<!-- /.container -->

注：

这会使背景图像成为容器的 100%，即使容器大于原始图像大小。在您的情况下，您已将视频放在 Bootstrap 列中，因此这应该不是问题，但是如果它确实成为问题，您只需使用媒体查询来更改百分比值以适应。

示例：使背景图像响应直到屏幕尺寸达到 768px，然后将其限制为固定尺寸：

.caption {
    background: transparent url([your url]/play-video.jpg) no-repeat center;
    background-size: 100%;
}

@media (min-width: 768px){
    .caption {
        background-size: 400px 300px;
    }
}

如何使覆盖元素响应？

How to make an overlay element responsive?

css

thumbnails

twitter-bootstrap