Javascript 引导覆盖映像没有响应

我正在使用此CSS代码在引导中的滑块上创建图像覆盖，但当向下调整图像大小时，图像没有响应：

.overlay {
background: url(../img/bocSlider.png) top left no-repeat;
position: absolute; 
background-position: center;
width: 100%;
height: 100%;
z-index: 10;
pointer-events: none;
  }
     @media (min-width: 768px) and (max-width: 979px) {
      .overlay{

         width:50%;
        height:50%;
  }    
 }

  @media (max-width: 767px) {
     .overlay{

  width:50%;
  height:50%;
  }

  }
@media (max-width: 480px) {
   .overlay{
   width:50%;
  height:50%;

  }
}

下面是我正在使用的滑块的HTML：

您可以使用背景色而不是覆盖图像。 只要写

背景色：rgba（0,0,0,5）

---

希望这将对您有所帮助。

在您的css中添加背景大小属性

.overlay {
background: url(../img/bocSlider.png) top left no-repeat;
position: absolute; 
background-position: center;
background-size: 100%;
width: 100%;
height: 100%;
z-index: 10;
pointer-events: none;
  }

您以错误的方式添加类，并且在引导中img responsive应用于img标记

<div class="overlay" class="img-responsive"></div>

应该是

<div class="overlay img-responsive"></div>

对于您的代码，请删除img

<div class="overlay"></div>

首先检查您是否包含meta View端口标记，否则您的媒体查询将无法工作。使用“最大宽度”而不是“宽度”，同时将“高度”设置为“自动”，否则您的img将失去其比例，这样您的“最大宽度”将始终与其设备宽度成比例。@WisdmLabs如果我在中将“高度”设置为“自动”。覆盖图像甚至不会出现…-@WisdmLabs我的文档中有meta viewoporttag，这只是我正在工作的网站的一小部分。。正如我之前所说的，如果我使用的不是高度和宽度的图像，而不是您在下面的评论中提供的图像，那么您实际需要的是将覆盖div居中对齐并在大小上重新缩放，请将以下样式设置为您的。覆盖：-显示：内联块；保证金：0自动；因此，当您的覆盖点击媒体查询，您的大小减少到75%宽度时，您的覆盖将按需要对齐…抱歉！我只是想尝试一下课堂上的事情！我没有意识到如果我把它放进背景尺寸：100%，图像太大了，想要的尺寸应该是50%（）但是当我缩小时，试试背景尺寸：封面；而不是背景大小：100%；仍然与100%变大的方式相同&仍然不能适当缩小背景大小：包含100%；