Bootstrap两个部分一个重叠图像

Question

我正在使用Bootstrap来制作这个设计。我想知道使用内嵌图像跨越两个部分和背景图像的最佳方法。

显然会有回应。

任何建议表示赞赏。谢谢！

Answer 1

我们可以通过为它们创建3个div和容器来实现这一点，并为容器提供相对位置，并为第3个div提供绝对位置。 代码：

       .box_1 {
            background-color: #c1c1c1;
            height: 100px;
        }
        .box_2 {
            background-color: #cc0000;
            height: 100px;
        }
        .box_3 {
            background-color: #000;
            display: block;
            height: 100px;
            left: 42%;
            position: absolute;
            top: 50px;
            width: 50px;
        }
        .box_container {
            position: relative;
        }
[Working example][1]https://jsfiddle.net/4c22acc0/