html - 具有重叠图像的 Bootstrap

Question

我有一个图像作为背景，我正在尝试使用 Bootstrap 中的 col- 来放置更多与背景重叠的图像，但我不能，因为重叠效果我将图像的 position 设置为 absolute，我认为这是导致问题的原因，'col-' 不起作用。这是代码:

HTML:

<img src="imag/bgimage.png" class="bg">

<div class="text-center">
<div class="col-md-3 inline-block overlap">
    <article>
        <img src="imag/image1.png">
    </article>  
</div>
<div class="col-md-3 inline-block overlap">
    <article>
        <img src="imag/image2.png">
    </article>  
</div>

CSS:
.bg {
width: 100%;
height: 100%;
opacity: 0.5;
}

.overlap {
position: absolute;
z-index: 1;
}

.inline-block {
float: none;
display: inline-block;
}

Answer 1

尝试使父容器的位置相对