如何使覆盖元素响应？

Posted 2023-03-29

【中文标题】如何使覆盖元素响应？

【英文标题】：How to make an overlay element responsive?

【发布时间】：2018-04-02 08:22:29

【问题描述】：

我在 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"  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)
    
  );

);

【参考方案1】：

你正在设置背景图片，购买你没有指定尺寸，所以它会默认为全尺寸。

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

background-size: 50%;

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

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

工作 sn-p：

/* 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"  class="img-responsive">
        </a>
      </div>
      <!-- /.thumb-->
    </div>
    <!-- /.col -->

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

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

注意：

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

示例：让背景图片响应，直到屏幕尺寸达到 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;
    

【讨论】：

这很完美，解释也很好。谢谢。

@JulianJ 很高兴为您提供帮助！我总是更喜欢用代码来解释，如果你明白它在做什么，那么将来更改或重用 ide 会更容易:)