黑色透明滤镜的位置和宽度（CSS，bootstrap 4）

Question

我使用最新版本的bootstrap并且我在使用CSS时遇到了一些麻烦，因为我不熟悉它（我的意思是不习惯引导程序）。

我想在我的图像上放置一个黑色滤镜（在“Qui suis-je”部分右侧），就像我在滑块上做的那样（它的效果非常好！）。但是......有一个转变（可能是col类的原因）。我想保持相同的填充，所以如果我将“填充：0”添加到父级（类sec-1-2），它会变得太大。

有人可以帮帮我吗？

这是我的网站（目前正在建设中，你会看到）：blog.amelie-mathieu.fr和screenshot of my problem。即使您能够在浏览器控制台上看到代码，下面是相关代码。

非常感谢你 ！

.sect-1-2 {
    height: 100%;
}

.sect-1-2 img {
     position: relative;
     z-index: 1;
 }

.play img {
    width: 80px;
    position: absolute;
    z-index: 5;
    display: inline-block;
    margin-top: 15%;
}

.play {
    text-align: center;
}

<div class="sect-1-2 col-lg-6 col-md-12">
         <div class="transparent-bg2"></div>
         <div class="play"><img src="images/play.png"/></div>
         <div><img src="images/Thumbnail-CV-vidéo-Janvier-2018.png" class="img-fluid"/></div>
    </div>

Answer 1

问题是absolute的.transparent-bg2定位将其从文档流中取出，从而忽略了父元素的填充。为了解决这个问题，一种解决方案是使用calc()将绝对定位元素的宽度设置为100％ - 30px（父元素上填充的组合宽度）：

.transparent-bg2 {
    background-color:rgba(0, 0, 0, 0.4);
    position:absolute;
    visibility:visible;
    opacity:1;
    transition:opacity 0.5s linear;
    width:calc(100% - 30px); /* subtract parent element padding from width */
    height:100%;
    z-index:2;
}