Bootstrap img，颜色叠加无响应

Question

我有一个对Bootstrap响应的img。我想为图像添加叠加颜色。 function show(elementID) { var ele = document.getElementById(elementID); if (!ele) { alert("no such element"); return; } var pages = document.getElementsByClassName('container-fluid'); for(var i = 0; i < pages.length; i++) { pages[i].style.display = 'none'; } ele.style.display = 'block'; if(elementID == "main3"){ setTimeout(function(){ show("main1"); }, 10000); } }

JSFiddle示例：https://jsfiddle.net/1h8Lk11j/5/

在图像中，我希望图像的较暗部分与图像的大小相同，但我无法正确使用。

问题是图像叠加不会随着屏幕尺寸而缩放，我希望它与图像的大小完全相同。我尝试了一个具有相对定位的父div，它对我没用。

我目前正在使用div容器作为图像的叠加层，但它似乎不是一个很好的解决方案。

background-color:#110022;

CSS

<div class="container-full">
      <div class="row">
        <div class="col-lg-12 text-center v-center">
          <h1 class="calltoaction">Insert some Text here</h1>
          <br><br><br>
        </div>
      </div> <!-- /row -->
</div> <!-- /container full -->

编辑：我在发布问题之前已经阅读过该帖子。解决方案对我不起作用。